feat: ai chat now has its own context
This commit includes refactoring and dividing the AI chat files to ensure better readability.
This commit is contained in:
Akhileshrangani4
@ -1,352 +0,0 @@
|
||||
import React, { useState, useEffect, useRef, useCallback } from 'react';
|
||||
import { Button } from '../ui/button';
|
||||
import { Send, StopCircle, Copy, Check, ChevronDown, ChevronUp, X, CornerUpLeft, Loader2 } from 'lucide-react';
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
|
||||
import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
|
||||
import LoadingDots from '../ui/LoadingDots';
|
||||
|
||||
interface Message {
|
||||
role: 'user' | 'assistant';
|
||||
content: string;
|
||||
context?: string;
|
||||
}
|
||||
|
||||
export default function AIChat() {
|
||||
const [messages, setMessages] = useState<Message[]>([]);
|
||||
const [input, setInput] = useState('');
|
||||
const [isGenerating, setIsGenerating] = useState(false);
|
||||
const chatContainerRef = useRef<HTMLDivElement>(null);
|
||||
const abortControllerRef = useRef<AbortController | null>(null);
|
||||
const [copiedIndex, setCopiedIndex] = useState<number | null>(null);
|
||||
const [context, setContext] = useState<string | null>(null);
|
||||
const [isContextExpanded, setIsContextExpanded] = useState(false);
|
||||
const [expandedMessageIndex, setExpandedMessageIndex] = useState<number | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
scrollToBottom();
|
||||
}, [messages]);
|
||||
|
||||
const scrollToBottom = () => {
|
||||
if (chatContainerRef.current) {
|
||||
setTimeout(() => {
|
||||
chatContainerRef.current?.scrollTo({
|
||||
top: chatContainerRef.current.scrollHeight,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}, 100);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSend = useCallback(async () => {
|
||||
if (input.trim() === '' && !context) return;
|
||||
|
||||
const newMessage: Message = {
|
||||
role: 'user',
|
||||
content: input,
|
||||
context: context || undefined
|
||||
};
|
||||
setMessages(prev => [...prev, newMessage]);
|
||||
setInput('');
|
||||
setIsContextExpanded(false);
|
||||
setIsGenerating(true);
|
||||
setIsLoading(true);
|
||||
|
||||
abortControllerRef.current = new AbortController();
|
||||
|
||||
try {
|
||||
const queryParams = new URLSearchParams({
|
||||
instructions: input,
|
||||
...(context && { context })
|
||||
});
|
||||
const response = await fetch(`${process.env.NEXT_PUBLIC_AI_WORKER_URL}/api?${queryParams}`, {
|
||||
method: 'GET',
|
||||
signal: abortControllerRef.current.signal,
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to get AI response');
|
||||
}
|
||||
|
||||
const reader = response.body?.getReader();
|
||||
const decoder = new TextDecoder();
|
||||
const assistantMessage: Message = { role: 'assistant', content: '' };
|
||||
setMessages(prev => [...prev, assistantMessage]);
|
||||
setIsLoading(false);
|
||||
|
||||
let buffer = '';
|
||||
const updateInterval = 100; // Update every 100ms
|
||||
let lastUpdateTime = Date.now();
|
||||
|
||||
if (reader) {
|
||||
while (true) {
|
||||
const { done, value } = await reader.read();
|
||||
if (done) break;
|
||||
buffer += decoder.decode(value, { stream: true });
|
||||
|
||||
const currentTime = Date.now();
|
||||
if (currentTime - lastUpdateTime > updateInterval) {
|
||||
setMessages(prev => {
|
||||
const updatedMessages = [...prev];
|
||||
const lastMessage = updatedMessages[updatedMessages.length - 1];
|
||||
lastMessage.content = buffer;
|
||||
return updatedMessages;
|
||||
});
|
||||
lastUpdateTime = currentTime;
|
||||
}
|
||||
}
|
||||
|
||||
// Final update to ensure all content is displayed
|
||||
setMessages(prev => {
|
||||
const updatedMessages = [...prev];
|
||||
const lastMessage = updatedMessages[updatedMessages.length - 1];
|
||||
lastMessage.content = buffer;
|
||||
return updatedMessages;
|
||||
});
|
||||
}
|
||||
} catch (error: any) {
|
||||
if (error.name === 'AbortError') {
|
||||
console.log('Generation aborted');
|
||||
} else {
|
||||
console.error('Error fetching AI response:', error);
|
||||
const errorMessage: Message = { role: 'assistant', content: 'Sorry, I encountered an error. Please try again.' };
|
||||
setMessages(prev => [...prev, errorMessage]);
|
||||
}
|
||||
} finally {
|
||||
setIsGenerating(false);
|
||||
setIsLoading(false);
|
||||
abortControllerRef.current = null;
|
||||
}
|
||||
}, [input, context]);
|
||||
|
||||
const handleStopGeneration = () => {
|
||||
if (abortControllerRef.current) {
|
||||
abortControllerRef.current.abort();
|
||||
}
|
||||
};
|
||||
|
||||
const copyToClipboard = (text: string, index: number) => {
|
||||
navigator.clipboard.writeText(text).then(() => {
|
||||
setCopiedIndex(index);
|
||||
setTimeout(() => setCopiedIndex(null), 1000); // Reset after 1 seconds
|
||||
});
|
||||
};
|
||||
|
||||
const askAboutCode = (code: string) => {
|
||||
setContext(`Regarding this code:\n${code}`);
|
||||
setIsContextExpanded(false);
|
||||
};
|
||||
|
||||
const removeContext = () => {
|
||||
setContext(null);
|
||||
setIsContextExpanded(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-screen w-full">
|
||||
<span className="text-muted-foreground/50 font-medium p-2">CHAT</span>
|
||||
<div ref={chatContainerRef} className="flex-grow overflow-y-auto p-4 space-y-4">
|
||||
{messages.map((message, messageIndex) => (
|
||||
<div key={messageIndex} className="text-left">
|
||||
<div className={`inline-block p-2 rounded-lg ${
|
||||
message.role === 'user'
|
||||
? 'bg-[#262626] text-white'
|
||||
: 'bg-transparent text-white'
|
||||
} max-w-full`}>
|
||||
{message.context && (
|
||||
<div className="mb-2 bg-input rounded-lg">
|
||||
<div
|
||||
className="flex justify-between items-center cursor-pointer"
|
||||
onClick={() => setExpandedMessageIndex(expandedMessageIndex === messageIndex ? null : messageIndex)}
|
||||
>
|
||||
<span className="text-sm text-gray-300">
|
||||
Context
|
||||
</span>
|
||||
{expandedMessageIndex === messageIndex ? (
|
||||
<ChevronUp size={16} />
|
||||
) : (
|
||||
<ChevronDown size={16} />
|
||||
)}
|
||||
</div>
|
||||
{expandedMessageIndex === messageIndex && (
|
||||
<div className="relative">
|
||||
<div className="absolute top-0 right-0 flex p-1">
|
||||
<Button
|
||||
onClick={() => copyToClipboard(message.context!.replace(/^Regarding this code:\n/, ''), messageIndex)}
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
className="p-1 h-6"
|
||||
>
|
||||
{copiedIndex === messageIndex ? (
|
||||
<Check className="w-4 h-4 text-green-500" />
|
||||
) : (
|
||||
<Copy className="w-4 h-4" />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
{(() => {
|
||||
// need to fix the language detection
|
||||
const code = message.context!.replace(/^Regarding this code:\n/, '');
|
||||
const match = /language-(\w+)/.exec(code);
|
||||
const language = match ? match[1] : 'typescript';
|
||||
return (
|
||||
<div className="pt-6">
|
||||
<SyntaxHighlighter
|
||||
style={vscDarkPlus as any}
|
||||
language={language}
|
||||
PreTag="div"
|
||||
customStyle={{
|
||||
margin: 0,
|
||||
padding: '0.5rem',
|
||||
fontSize: '0.875rem',
|
||||
}}
|
||||
>
|
||||
{code}
|
||||
</SyntaxHighlighter>
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{message.role === 'assistant' ? (
|
||||
<ReactMarkdown
|
||||
components={{
|
||||
code({node, className, children, ...props}) {
|
||||
const match = /language-(\w+)/.exec(className || '');
|
||||
const language = match ? match[1] : '';
|
||||
return match ? (
|
||||
<div className="relative border border-input rounded-md my-4">
|
||||
<div className="absolute top-0 left-0 px-2 py-1 text-xs font-semibold text-gray-200 bg-#1e1e1e rounded-tl">
|
||||
{language}
|
||||
</div>
|
||||
<div className="absolute top-0 right-0 flex">
|
||||
<Button
|
||||
onClick={() => copyToClipboard(String(children), messageIndex)}
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
className="p-1 h-6"
|
||||
>
|
||||
{copiedIndex === messageIndex ? (
|
||||
<Check className="w-4 h-4 text-green-500" />
|
||||
) : (
|
||||
<Copy className="w-4 h-4" />
|
||||
)}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => askAboutCode(String(children))}
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
className="p-1 h-6"
|
||||
>
|
||||
<CornerUpLeft className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="pt-6">
|
||||
<SyntaxHighlighter
|
||||
style={vscDarkPlus as any}
|
||||
language={match[1]}
|
||||
PreTag="div"
|
||||
customStyle={{
|
||||
margin: 0,
|
||||
padding: '0.5rem',
|
||||
fontSize: '0.875rem',
|
||||
}}
|
||||
>
|
||||
{String(children).replace(/\n$/, '')}
|
||||
</SyntaxHighlighter>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<code className={className} {...props}>
|
||||
{children}
|
||||
</code>
|
||||
);
|
||||
},
|
||||
p({children}) {
|
||||
return <p className="mb-4 whitespace-pre-line">{children}</p>;
|
||||
},
|
||||
ul({children}) {
|
||||
return <ul className="list-disc pl-6 mb-4">{children}</ul>;
|
||||
},
|
||||
ol({children}) {
|
||||
return <ol className="list-decimal pl-6 mb-4">{children}</ol>;
|
||||
},
|
||||
li({children}) {
|
||||
return <li className="mb-2">{children}</li>;
|
||||
},
|
||||
}}
|
||||
>
|
||||
{message.content}
|
||||
</ReactMarkdown>
|
||||
) : (
|
||||
<div className="whitespace-pre-wrap">{message.content}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{isLoading && (
|
||||
<LoadingDots />
|
||||
)}
|
||||
</div>
|
||||
<div className="p-4 border-t mb-14">
|
||||
{context && (
|
||||
<div className="mb-2 bg-input p-2 rounded-lg">
|
||||
<div className="flex justify-between items-center">
|
||||
<div
|
||||
className="flex-grow cursor-pointer"
|
||||
onClick={() => setIsContextExpanded(!isContextExpanded)}
|
||||
>
|
||||
<span className="text-sm text-gray-300">
|
||||
Context
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
{isContextExpanded ? (
|
||||
<ChevronUp size={16} className="cursor-pointer" onClick={() => setIsContextExpanded(false)} />
|
||||
) : (
|
||||
<ChevronDown size={16} className="cursor-pointer" onClick={() => setIsContextExpanded(true)} />
|
||||
)}
|
||||
<X
|
||||
size={16}
|
||||
className="ml-2 cursor-pointer text-gray-400 hover:text-gray-200"
|
||||
onClick={removeContext}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{isContextExpanded && (
|
||||
<textarea
|
||||
value={context.replace(/^Regarding this code:\n/, '')}
|
||||
onChange={(e) => setContext(e.target.value)}
|
||||
className="w-full mt-2 p-2 bg-#1e1e1e text-white rounded"
|
||||
rows={5}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex space-x-2 min-w-0">
|
||||
<input
|
||||
type="text"
|
||||
value={input}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
onKeyPress={(e) => e.key === 'Enter' && !isGenerating && handleSend()}
|
||||
className="flex-grow p-2 border rounded-lg min-w-0 bg-input"
|
||||
placeholder={context ? "Add more context or ask a question..." : "Type your message..."}
|
||||
disabled={isGenerating}
|
||||
/>
|
||||
{isGenerating ? (
|
||||
<Button onClick={handleStopGeneration} variant="destructive" size="icon" className="h-10 w-10">
|
||||
<StopCircle className="w-4 h-4" />
|
||||
</Button>
|
||||
) : (
|
||||
<Button onClick={handleSend} disabled={isGenerating} size="icon" className="h-10 w-10">
|
||||
<Send className="w-4 h-4" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
36
frontend/components/editor/AIChat/ChatInput.tsx
Normal file
36
frontend/components/editor/AIChat/ChatInput.tsx
Normal file
@ -0,0 +1,36 @@
|
||||
import React from 'react';
|
||||
import { Button } from '../../ui/button';
|
||||
import { Send, StopCircle } from 'lucide-react';
|
||||
|
||||
interface ChatInputProps {
|
||||
input: string;
|
||||
setInput: (input: string) => void;
|
||||
isGenerating: boolean;
|
||||
handleSend: () => void;
|
||||
handleStopGeneration: () => void;
|
||||
}
|
||||
|
||||
export default function ChatInput({ input, setInput, isGenerating, handleSend, handleStopGeneration }: ChatInputProps) {
|
||||
return (
|
||||
<div className="flex space-x-2 min-w-0">
|
||||
<input
|
||||
type="text"
|
||||
value={input}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
onKeyPress={(e) => e.key === 'Enter' && !isGenerating && handleSend()}
|
||||
className="flex-grow p-2 border rounded-lg min-w-0 bg-input"
|
||||
placeholder="Type your message..."
|
||||
disabled={isGenerating}
|
||||
/>
|
||||
{isGenerating ? (
|
||||
<Button onClick={handleStopGeneration} variant="destructive" size="icon" className="h-10 w-10">
|
||||
<StopCircle className="w-4 h-4" />
|
||||
</Button>
|
||||
) : (
|
||||
<Button onClick={handleSend} disabled={isGenerating} size="icon" className="h-10 w-10">
|
||||
<Send className="w-4 h-4" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
201
frontend/components/editor/AIChat/ChatMessage.tsx
Normal file
201
frontend/components/editor/AIChat/ChatMessage.tsx
Normal file
@ -0,0 +1,201 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Button } from '../../ui/button';
|
||||
import { ChevronUp, ChevronDown, Copy, Check, CornerUpLeft } from 'lucide-react';
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
|
||||
import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
|
||||
import remarkGfm from 'remark-gfm';
|
||||
import { copyToClipboard, stringifyContent } from './lib/chatUtils';
|
||||
|
||||
interface MessageProps {
|
||||
message: {
|
||||
role: 'user' | 'assistant';
|
||||
content: string;
|
||||
context?: string;
|
||||
};
|
||||
setContext: (context: string | null) => void;
|
||||
setIsContextExpanded: (isExpanded: boolean) => void;
|
||||
}
|
||||
|
||||
export default function ChatMessage({ message, setContext, setIsContextExpanded }: MessageProps) {
|
||||
const [expandedMessageIndex, setExpandedMessageIndex] = useState<number | null>(null);
|
||||
const [copiedText, setCopiedText] = useState<string | null>(null);
|
||||
|
||||
const renderCopyButton = (text: any) => (
|
||||
<Button
|
||||
onClick={() => copyToClipboard(stringifyContent(text), setCopiedText)}
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
className="p-1 h-6"
|
||||
>
|
||||
{copiedText === stringifyContent(text) ? (
|
||||
<Check className="w-4 h-4 text-green-500" />
|
||||
) : (
|
||||
<Copy className="w-4 h-4" />
|
||||
)}
|
||||
</Button>
|
||||
);
|
||||
|
||||
const askAboutCode = (code: any) => {
|
||||
const contextString = stringifyContent(code);
|
||||
setContext(`Regarding this code:\n${contextString}`);
|
||||
setIsContextExpanded(false);
|
||||
};
|
||||
|
||||
const renderMarkdownElement = (props: any) => {
|
||||
const { node, children } = props;
|
||||
const content = stringifyContent(children);
|
||||
|
||||
return (
|
||||
<div className="relative group">
|
||||
<div className="absolute top-0 right-0 flex opacity-0 group-hover:opacity-30 transition-opacity">
|
||||
{renderCopyButton(content)}
|
||||
<Button
|
||||
onClick={() => askAboutCode(content)}
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
className="p-1 h-6"
|
||||
>
|
||||
<CornerUpLeft className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
{React.createElement(node.tagName, {
|
||||
...props,
|
||||
className: `${props.className || ''} hover:bg-transparent rounded p-1 transition-colors`
|
||||
}, children)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="text-left relative">
|
||||
<div className={`relative p-2 rounded-lg ${
|
||||
message.role === 'user'
|
||||
? 'bg-[#262626] text-white'
|
||||
: 'bg-transparent text-white'
|
||||
} max-w-full`}>
|
||||
{message.role === 'user' && (
|
||||
<div className="absolute top-0 right-0 flex opacity-0 group-hover:opacity-30 transition-opacity">
|
||||
{renderCopyButton(message.content)}
|
||||
<Button
|
||||
onClick={() => askAboutCode(message.content)}
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
className="p-1 h-6"
|
||||
>
|
||||
<CornerUpLeft className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
{message.context && (
|
||||
<div className="mb-2 bg-input rounded-lg">
|
||||
<div
|
||||
className="flex justify-between items-center cursor-pointer"
|
||||
onClick={() => setExpandedMessageIndex(expandedMessageIndex === 0 ? null : 0)}
|
||||
>
|
||||
<span className="text-sm text-gray-300">
|
||||
Context
|
||||
</span>
|
||||
{expandedMessageIndex === 0 ? (
|
||||
<ChevronUp size={16} />
|
||||
) : (
|
||||
<ChevronDown size={16} />
|
||||
)}
|
||||
</div>
|
||||
{expandedMessageIndex === 0 && (
|
||||
<div className="relative">
|
||||
<div className="absolute top-0 right-0 flex p-1">
|
||||
{renderCopyButton(message.context.replace(/^Regarding this code:\n/, ''))}
|
||||
</div>
|
||||
{(() => {
|
||||
const code = message.context.replace(/^Regarding this code:\n/, '');
|
||||
const match = /language-(\w+)/.exec(code);
|
||||
const language = match ? match[1] : 'typescript';
|
||||
return (
|
||||
<div className="pt-6">
|
||||
<textarea
|
||||
value={code}
|
||||
onChange={(e) => {
|
||||
const updatedContext = `Regarding this code:\n${e.target.value}`;
|
||||
setContext(updatedContext);
|
||||
}}
|
||||
className="w-full p-2 bg-[#1e1e1e] text-white font-mono text-sm rounded"
|
||||
rows={code.split('\n').length}
|
||||
style={{
|
||||
resize: 'vertical',
|
||||
minHeight: '100px',
|
||||
maxHeight: '400px',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{message.role === 'assistant' ? (
|
||||
<ReactMarkdown
|
||||
remarkPlugins={[remarkGfm]}
|
||||
components={{
|
||||
code({node, className, children, ...props}) {
|
||||
const match = /language-(\w+)/.exec(className || '');
|
||||
return match ? (
|
||||
<div className="relative border border-input rounded-md my-4">
|
||||
<div className="absolute top-0 left-0 px-2 py-1 text-xs font-semibold text-gray-200 bg-#1e1e1e rounded-tl">
|
||||
{match[1]}
|
||||
</div>
|
||||
<div className="absolute top-0 right-0 flex">
|
||||
{renderCopyButton(children)}
|
||||
<Button
|
||||
onClick={() => askAboutCode(children)}
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
className="p-1 h-6"
|
||||
>
|
||||
<CornerUpLeft className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="pt-6">
|
||||
<SyntaxHighlighter
|
||||
style={vscDarkPlus as any}
|
||||
language={match[1]}
|
||||
PreTag="div"
|
||||
customStyle={{
|
||||
margin: 0,
|
||||
padding: '0.5rem',
|
||||
fontSize: '0.875rem',
|
||||
}}
|
||||
>
|
||||
{stringifyContent(children)}
|
||||
</SyntaxHighlighter>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<code className={className} {...props}>
|
||||
{children}
|
||||
</code>
|
||||
);
|
||||
},
|
||||
p: renderMarkdownElement,
|
||||
h1: renderMarkdownElement,
|
||||
h2: renderMarkdownElement,
|
||||
h3: renderMarkdownElement,
|
||||
h4: renderMarkdownElement,
|
||||
h5: renderMarkdownElement,
|
||||
h6: renderMarkdownElement,
|
||||
ul: (props) => <ul className="list-disc pl-6 mb-4 space-y-2">{props.children}</ul>,
|
||||
ol: (props) => <ol className="list-decimal pl-6 mb-4 space-y-2">{props.children}</ol>,
|
||||
}}
|
||||
>
|
||||
{message.content}
|
||||
</ReactMarkdown>
|
||||
) : (
|
||||
<div className="whitespace-pre-wrap group">
|
||||
{message.content}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
48
frontend/components/editor/AIChat/ContextDisplay.tsx
Normal file
48
frontend/components/editor/AIChat/ContextDisplay.tsx
Normal file
@ -0,0 +1,48 @@
|
||||
import React from 'react';
|
||||
import { ChevronUp, ChevronDown, X } from 'lucide-react';
|
||||
|
||||
interface ContextDisplayProps {
|
||||
context: string | null;
|
||||
isContextExpanded: boolean;
|
||||
setIsContextExpanded: (isExpanded: boolean) => void;
|
||||
setContext: (context: string | null) => void;
|
||||
}
|
||||
|
||||
export default function ContextDisplay({ context, isContextExpanded, setIsContextExpanded, setContext }: ContextDisplayProps) {
|
||||
if (!context) return null;
|
||||
|
||||
return (
|
||||
<div className="mb-2 bg-input p-2 rounded-lg">
|
||||
<div className="flex justify-between items-center">
|
||||
<div
|
||||
className="flex-grow cursor-pointer"
|
||||
onClick={() => setIsContextExpanded(!isContextExpanded)}
|
||||
>
|
||||
<span className="text-sm text-gray-300">
|
||||
Context
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
{isContextExpanded ? (
|
||||
<ChevronUp size={16} className="cursor-pointer" onClick={() => setIsContextExpanded(false)} />
|
||||
) : (
|
||||
<ChevronDown size={16} className="cursor-pointer" onClick={() => setIsContextExpanded(true)} />
|
||||
)}
|
||||
<X
|
||||
size={16}
|
||||
className="ml-2 cursor-pointer text-gray-400 hover:text-gray-200"
|
||||
onClick={() => setContext(null)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{isContextExpanded && (
|
||||
<textarea
|
||||
value={context.replace(/^Regarding this code:\n/, '')}
|
||||
onChange={(e) => setContext(`Regarding this code:\n${e.target.value}`)}
|
||||
className="w-full mt-2 p-2 bg-#1e1e1e text-white rounded"
|
||||
rows={5}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
70
frontend/components/editor/AIChat/index.tsx
Normal file
70
frontend/components/editor/AIChat/index.tsx
Normal file
@ -0,0 +1,70 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import LoadingDots from '../../ui/LoadingDots';
|
||||
import ChatMessage from './ChatMessage';
|
||||
import ChatInput from './ChatInput';
|
||||
import ContextDisplay from './ContextDisplay';
|
||||
import { handleSend, handleStopGeneration } from './lib/chatUtils';
|
||||
|
||||
interface Message {
|
||||
role: 'user' | 'assistant';
|
||||
content: string;
|
||||
context?: string;
|
||||
}
|
||||
|
||||
export default function AIChat() {
|
||||
const [messages, setMessages] = useState<Message[]>([]);
|
||||
const [input, setInput] = useState('');
|
||||
const [isGenerating, setIsGenerating] = useState(false);
|
||||
const chatContainerRef = useRef<HTMLDivElement>(null);
|
||||
const abortControllerRef = useRef<AbortController | null>(null);
|
||||
const [context, setContext] = useState<string | null>(null);
|
||||
const [isContextExpanded, setIsContextExpanded] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
scrollToBottom();
|
||||
}, [messages]);
|
||||
|
||||
const scrollToBottom = () => {
|
||||
if (chatContainerRef.current) {
|
||||
setTimeout(() => {
|
||||
chatContainerRef.current?.scrollTo({
|
||||
top: chatContainerRef.current.scrollHeight,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}, 100);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-screen w-full">
|
||||
<span className="text-muted-foreground/50 font-medium p-2">CHAT</span>
|
||||
<div ref={chatContainerRef} className="flex-grow overflow-y-auto p-4 space-y-4">
|
||||
{messages.map((message, messageIndex) => (
|
||||
<ChatMessage
|
||||
key={messageIndex}
|
||||
message={message}
|
||||
setContext={setContext}
|
||||
setIsContextExpanded={setIsContextExpanded}
|
||||
/>
|
||||
))}
|
||||
{isLoading && <LoadingDots />}
|
||||
</div>
|
||||
<div className="p-4 border-t mb-14">
|
||||
<ContextDisplay
|
||||
context={context}
|
||||
isContextExpanded={isContextExpanded}
|
||||
setIsContextExpanded={setIsContextExpanded}
|
||||
setContext={setContext}
|
||||
/>
|
||||
<ChatInput
|
||||
input={input}
|
||||
setInput={setInput}
|
||||
isGenerating={isGenerating}
|
||||
handleSend={() => handleSend(input, context, messages, setMessages, setInput, setIsContextExpanded, setIsGenerating, setIsLoading, abortControllerRef)}
|
||||
handleStopGeneration={() => handleStopGeneration(abortControllerRef)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
160
frontend/components/editor/AIChat/lib/chatUtils.ts
Normal file
160
frontend/components/editor/AIChat/lib/chatUtils.ts
Normal file
@ -0,0 +1,160 @@
|
||||
import React from 'react';
|
||||
|
||||
export const stringifyContent = (content: any, seen = new WeakSet()): string => {
|
||||
if (typeof content === 'string') {
|
||||
return content;
|
||||
}
|
||||
if (content === null) {
|
||||
return 'null';
|
||||
}
|
||||
if (content === undefined) {
|
||||
return 'undefined';
|
||||
}
|
||||
if (typeof content === 'number' || typeof content === 'boolean') {
|
||||
return content.toString();
|
||||
}
|
||||
if (typeof content === 'function') {
|
||||
return content.toString();
|
||||
}
|
||||
if (typeof content === 'symbol') {
|
||||
return content.toString();
|
||||
}
|
||||
if (typeof content === 'bigint') {
|
||||
return content.toString() + 'n';
|
||||
}
|
||||
if (React.isValidElement(content)) {
|
||||
return React.Children.toArray((content as React.ReactElement).props.children)
|
||||
.map(child => stringifyContent(child, seen))
|
||||
.join('');
|
||||
}
|
||||
if (Array.isArray(content)) {
|
||||
return '[' + content.map(item => stringifyContent(item, seen)).join(', ') + ']';
|
||||
}
|
||||
if (typeof content === 'object') {
|
||||
if (seen.has(content)) {
|
||||
return '[Circular]';
|
||||
}
|
||||
seen.add(content);
|
||||
try {
|
||||
const pairs = Object.entries(content).map(
|
||||
([key, value]) => `${key}: ${stringifyContent(value, seen)}`
|
||||
);
|
||||
return '{' + pairs.join(', ') + '}';
|
||||
} catch (error) {
|
||||
return Object.prototype.toString.call(content);
|
||||
}
|
||||
}
|
||||
return String(content);
|
||||
};
|
||||
|
||||
export const copyToClipboard = (text: string, setCopiedText: (text: string | null) => void) => {
|
||||
navigator.clipboard.writeText(text).then(() => {
|
||||
setCopiedText(text);
|
||||
setTimeout(() => setCopiedText(null), 2000);
|
||||
});
|
||||
};
|
||||
|
||||
export const handleSend = async (
|
||||
input: string,
|
||||
context: string | null,
|
||||
messages: any[],
|
||||
setMessages: React.Dispatch<React.SetStateAction<any[]>>,
|
||||
setInput: React.Dispatch<React.SetStateAction<string>>,
|
||||
setIsContextExpanded: React.Dispatch<React.SetStateAction<boolean>>,
|
||||
setIsGenerating: React.Dispatch<React.SetStateAction<boolean>>,
|
||||
setIsLoading: React.Dispatch<React.SetStateAction<boolean>>,
|
||||
abortControllerRef: React.MutableRefObject<AbortController | null>
|
||||
) => {
|
||||
if (input.trim() === '' && !context) return;
|
||||
|
||||
const newMessage = {
|
||||
role: 'user' as const,
|
||||
content: input,
|
||||
context: context || undefined
|
||||
};
|
||||
const updatedMessages = [...messages, newMessage];
|
||||
setMessages(updatedMessages);
|
||||
setInput('');
|
||||
setIsContextExpanded(false);
|
||||
setIsGenerating(true);
|
||||
setIsLoading(true);
|
||||
|
||||
abortControllerRef.current = new AbortController();
|
||||
|
||||
try {
|
||||
const anthropicMessages = updatedMessages.map(msg => ({
|
||||
role: msg.role === 'user' ? 'human' : 'assistant',
|
||||
content: msg.content
|
||||
}));
|
||||
|
||||
const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
messages: anthropicMessages,
|
||||
context: context || undefined,
|
||||
}),
|
||||
signal: abortControllerRef.current.signal,
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to get AI response');
|
||||
}
|
||||
|
||||
const reader = response.body?.getReader();
|
||||
const decoder = new TextDecoder();
|
||||
const assistantMessage = { role: 'assistant' as const, content: '' };
|
||||
setMessages([...updatedMessages, assistantMessage]);
|
||||
setIsLoading(false);
|
||||
|
||||
let buffer = '';
|
||||
const updateInterval = 100;
|
||||
let lastUpdateTime = Date.now();
|
||||
|
||||
if (reader) {
|
||||
while (true) {
|
||||
const { done, value } = await reader.read();
|
||||
if (done) break;
|
||||
buffer += decoder.decode(value, { stream: true });
|
||||
|
||||
const currentTime = Date.now();
|
||||
if (currentTime - lastUpdateTime > updateInterval) {
|
||||
setMessages(prev => {
|
||||
const updatedMessages = [...prev];
|
||||
const lastMessage = updatedMessages[updatedMessages.length - 1];
|
||||
lastMessage.content = buffer;
|
||||
return updatedMessages;
|
||||
});
|
||||
lastUpdateTime = currentTime;
|
||||
}
|
||||
}
|
||||
|
||||
setMessages(prev => {
|
||||
const updatedMessages = [...prev];
|
||||
const lastMessage = updatedMessages[updatedMessages.length - 1];
|
||||
lastMessage.content = buffer;
|
||||
return updatedMessages;
|
||||
});
|
||||
}
|
||||
} catch (error: any) {
|
||||
if (error.name === 'AbortError') {
|
||||
console.log('Generation aborted');
|
||||
} else {
|
||||
console.error('Error fetching AI response:', error);
|
||||
const errorMessage = { role: 'assistant' as const, content: 'Sorry, I encountered an error. Please try again.' };
|
||||
setMessages(prev => [...prev, errorMessage]);
|
||||
}
|
||||
} finally {
|
||||
setIsGenerating(false);
|
||||
setIsLoading(false);
|
||||
abortControllerRef.current = null;
|
||||
}
|
||||
};
|
||||
|
||||
export const handleStopGeneration = (abortControllerRef: React.MutableRefObject<AbortController | null>) => {
|
||||
if (abortControllerRef.current) {
|
||||
abortControllerRef.current.abort();
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user