TNT-Flo/sandbox-web-ide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: ai chat now has context of the active tab

Browse Source
This commit is contained in:
Akhileshrangani4 2024-10-14 23:01:25 -04:00
parent cc4a5307cd
commit 751d9a3005
4 changed files with 17 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
backend/ai/src/index.ts
View File

@ -21,9 +21,10 @@ export default {
if (request.method !== "POST") { if (request.method !== "POST") {
return new Response("Method Not Allowed", { status: 405 }); return new Response("Method Not Allowed", { status: 405 });
} }
const body = await request.json() as { messages: unknown; context: unknown }; const body = await request.json() as { messages: unknown; context: unknown; activeFileContent: string };
const messages = body.messages; const messages = body.messages;
const context = body.context; const context = body.context;
const activeFileContent = body.activeFileContent;
if (!Array.isArray(messages)) { if (!Array.isArray(messages)) {
return new Response("Invalid messages format", { status: 400 }); return new Response("Invalid messages format", { status: 400 });
@ -37,7 +38,8 @@ print("Hello, World!")
Provide a clear and concise explanation along with any code snippets. Keep your response brief and to the point. Provide a clear and concise explanation along with any code snippets. Keep your response brief and to the point.
${context ? `Context:\n${context}\n` : ''}`; ${context ? `Context:\n${context}\n` : ''}
${activeFileContent ? `Active File Content:\n${activeFileContent}\n` : ''}`;
const anthropicMessages = messages.map(msg => ({ const anthropicMessages = messages.map(msg => ({
role: msg.role === 'human' ? 'user' : 'assistant', role: msg.role === 'human' ? 'user' : 'assistant',

9
frontend/components/editor/AIChat/index.tsx
View File

@ -11,7 +11,7 @@ interface Message {
context?: string; context?: string;
} }
export default function AIChat() { export default function AIChat({ activeFileContent, activeFileName }: { activeFileContent: string, activeFileName: string }) {
const [messages, setMessages] = useState<Message[]>([]); const [messages, setMessages] = useState<Message[]>([]);
const [input, setInput] = useState(''); const [input, setInput] = useState('');
const [isGenerating, setIsGenerating] = useState(false); const [isGenerating, setIsGenerating] = useState(false);
@ -38,7 +38,10 @@ export default function AIChat() {
return ( return (
<div className="flex flex-col h-screen w-full"> <div className="flex flex-col h-screen w-full">
<span className="text-muted-foreground/50 font-medium p-2">CHAT</span> <div className="flex justify-between items-center p-2 border-b">
<span className="text-muted-foreground/50 font-medium">CHAT</span>
<span className="text-muted-foreground/50 font-medium truncate max-w-[50%]" title={activeFileName}>{activeFileName}</span>
</div>
<div ref={chatContainerRef} className="flex-grow overflow-y-auto p-4 space-y-4"> <div ref={chatContainerRef} className="flex-grow overflow-y-auto p-4 space-y-4">
{messages.map((message, messageIndex) => ( {messages.map((message, messageIndex) => (
<ChatMessage <ChatMessage
@ -61,7 +64,7 @@ export default function AIChat() {
input={input} input={input}
setInput={setInput} setInput={setInput}
isGenerating={isGenerating} isGenerating={isGenerating}
handleSend={() => handleSend(input, context, messages, setMessages, setInput, setIsContextExpanded, setIsGenerating, setIsLoading, abortControllerRef)} handleSend={() => handleSend(input, context, messages, setMessages, setInput, setIsContextExpanded, setIsGenerating, setIsLoading, abortControllerRef, activeFileContent)}
handleStopGeneration={() => handleStopGeneration(abortControllerRef)} handleStopGeneration={() => handleStopGeneration(abortControllerRef)}
/> />
</div> </div>

4
frontend/components/editor/AIChat/lib/chatUtils.ts
View File

@ -63,7 +63,8 @@ export const handleSend = async (
setIsContextExpanded: React.Dispatch<React.SetStateAction<boolean>>, setIsContextExpanded: React.Dispatch<React.SetStateAction<boolean>>,
setIsGenerating: React.Dispatch<React.SetStateAction<boolean>>, setIsGenerating: React.Dispatch<React.SetStateAction<boolean>>,
setIsLoading: React.Dispatch<React.SetStateAction<boolean>>, setIsLoading: React.Dispatch<React.SetStateAction<boolean>>,
abortControllerRef: React.MutableRefObject<AbortController | null> abortControllerRef: React.MutableRefObject<AbortController | null>,
activeFileContent: string
) => { ) => {
if (input.trim() === '' && !context) return; if (input.trim() === '' && !context) return;
@ -95,6 +96,7 @@ export const handleSend = async (
body: JSON.stringify({ body: JSON.stringify({
messages: anthropicMessages, messages: anthropicMessages,
context: context || undefined, context: context || undefined,
activeFileContent: activeFileContent,
}), }),
signal: abortControllerRef.current.signal, signal: abortControllerRef.current.signal,
}); });

5
frontend/components/editor/index.tsx
View File

@ -1145,7 +1145,10 @@ export default function CodeEditor({
<> <>
<ResizableHandle /> <ResizableHandle />
<ResizablePanel defaultSize={30} minSize={15}> <ResizablePanel defaultSize={30} minSize={15}>
<AIChat /> <AIChat
activeFileContent={activeFileContent}
activeFileName={tabs.find(tab => tab.id === activeFileId)?.name || 'No file selected'}
/>
</ResizablePanel> </ResizablePanel>
</> </>
)} )}