Move to threads based system.

2026-06-22 10:37:26 -04:00
parent 8ae6c4b533
commit 206b64176b
82 changed files with 6169 additions and 1930 deletions
@@ -0,0 +1,83 @@
+'use client';
+
+import { useState } from 'react';
+import { Send } from 'lucide-react';
+import { toast } from 'sonner';
+
+import type { Doc } from '@spoon/backend/convex/_generated/dataModel.js';
+import { Button, Textarea } from '@spoon/ui';
+
+export const AgentThread = ({
+  jobId,
+  messages,
+  disabled,
+}: {
+  jobId: string;
+  messages: Doc<'agentJobMessages'>[];
+  disabled: boolean;
+}) => {
+  const [content, setContent] = useState('');
+  const [sending, setSending] = useState(false);
+
+  const send = async () => {
+    if (!content.trim()) return;
+    setSending(true);
+    try {
+      const response = await fetch(`/api/agent-jobs/${jobId}/message`, {
+        method: 'POST',
+        body: JSON.stringify({ content }),
+      });
+      if (!response.ok) throw new Error(await response.text());
+      setContent('');
+    } catch (error) {
+      console.error(error);
+      toast.error('Could not send message.');
+    } finally {
+      setSending(false);
+    }
+  };
+
+  return (
+    <div className='flex h-full min-h-[520px] flex-col'>
+      <div className='border-border border-b p-3'>
+        <h2 className='text-sm font-semibold'>Agent thread</h2>
+        <p className='text-muted-foreground text-xs'>
+          Messages persist with this workspace.
+        </p>
+      </div>
+      <div className='min-h-0 flex-1 space-y-3 overflow-auto p-3'>
+        {messages.map((message) => (
+          <article
+            key={message._id}
+            className='border-border bg-background rounded-md border p-3 text-sm'
+          >
+            <div className='mb-2 flex items-center justify-between gap-2'>
+              <span className='font-medium capitalize'>{message.role}</span>
+              <span className='text-muted-foreground text-xs capitalize'>
+                {message.status}
+              </span>
+            </div>
+            <p className='whitespace-pre-wrap'>{message.content}</p>
+          </article>
+        ))}
+      </div>
+      <div className='border-border space-y-2 border-t p-3'>
+        <Textarea
+          value={content}
+          placeholder='Ask the agent to inspect, explain, or change this fork.'
+          disabled={disabled || sending}
+          onChange={(event) => setContent(event.target.value)}
+        />
+        <Button
+          type='button'
+          className='w-full'
+          disabled={disabled || sending || !content.trim()}
+          onClick={send}
+        >
+          <Send className='size-4' />
+          {sending ? 'Sending...' : 'Send'}
+        </Button>
+      </div>
+    </div>
+  );
+};