-
- {activeConversation ? activeConversation.title : 'OpenJarvis Chat'}
-
-
- {serverInfo && (
- (null);
+ const abortRef = useRef(null);
+ const timerRef = useRef | null>(null);
- const fullMessage = attachment ? attachment + '\n' + typed : typed;
+ const activeId = useAppStore((s) => s.activeId);
+ const selectedModel = useAppStore((s) => s.selectedModel);
+ const streamState = useAppStore((s) => s.streamState);
+ const messages = useAppStore((s) => s.messages);
+ const createConversation = useAppStore((s) => s.createConversation);
+ const addMessage = useAppStore((s) => s.addMessage);
+ const updateLastAssistant = useAppStore((s) => s.updateLastAssistant);
+ const setStreamState = useAppStore((s) => s.setStreamState);
+ const resetStream = useAppStore((s) => s.resetStream);
- const handleSend = useCallback(() => {
- if (!fullMessage.trim() || isStreaming) return;
- onSend(fullMessage);
- setAttachment('');
- setTyped('');
- if (textareaRef.current) {
- textareaRef.current.style.height = 'auto';
+ // Auto-resize textarea
+ useEffect(() => {
+ const el = textareaRef.current;
+ if (!el) return;
+ el.style.height = 'auto';
+ el.style.height = Math.min(el.scrollHeight, 200) + 'px';
+ }, [input]);
+
+ const stopStreaming = useCallback(() => {
+ abortRef.current?.abort();
+ if (timerRef.current) {
+ clearInterval(timerRef.current);
+ timerRef.current = null;
}
- }, [fullMessage, isStreaming, onSend]);
+ resetStream();
+ }, [resetStream]);
- const handleKeyDown = (e: React.KeyboardEvent) => {
+ const sendMessage = useCallback(async () => {
+ const content = input.trim();
+ if (!content || streamState.isStreaming) return;
+
+ setInput('');
+
+ let convId = activeId;
+ if (!convId) {
+ convId = createConversation(selectedModel);
+ }
+
+ const userMsg: ChatMessage = {
+ id: generateId(),
+ role: 'user',
+ content,
+ timestamp: Date.now(),
+ };
+ addMessage(convId, userMsg);
+
+ // Build API messages before adding assistant placeholder
+ const currentMessages = useAppStore.getState().messages;
+ const apiMessages = currentMessages.map((m) => ({
+ role: m.role,
+ content: m.content,
+ }));
+
+ const assistantMsg: ChatMessage = {
+ id: generateId(),
+ role: 'assistant',
+ content: '',
+ timestamp: Date.now(),
+ };
+ addMessage(convId, assistantMsg);
+
+ // Start streaming
+ const startTime = Date.now();
+ const timer = setInterval(() => {
+ setStreamState({ elapsedMs: Date.now() - startTime });
+ }, 100);
+ timerRef.current = timer;
+
+ const controller = new AbortController();
+ abortRef.current = controller;
+
+ let accumulatedContent = '';
+ let usage: TokenUsage | undefined;
+ const toolCalls: ToolCallInfo[] = [];
+
+ setStreamState({
+ isStreaming: true,
+ phase: 'Sending...',
+ elapsedMs: 0,
+ activeToolCalls: [],
+ content: '',
+ });
+
+ try {
+ for await (const sseEvent of streamChat(
+ { model: selectedModel, messages: apiMessages, stream: true },
+ controller.signal,
+ )) {
+ const eventName = sseEvent.event;
+
+ if (eventName === 'agent_turn_start') {
+ setStreamState({ phase: 'Agent thinking...' });
+ } else if (eventName === 'inference_start') {
+ setStreamState({ phase: 'Generating...' });
+ } else if (eventName === 'tool_call_start') {
+ try {
+ const data = JSON.parse(sseEvent.data);
+ const tc: ToolCallInfo = {
+ id: generateId(),
+ tool: data.tool,
+ arguments: data.arguments || '',
+ status: 'running',
+ };
+ toolCalls.push(tc);
+ setStreamState({
+ phase: `Running ${data.tool}...`,
+ activeToolCalls: [...toolCalls],
+ });
+ updateLastAssistant(convId, accumulatedContent, [...toolCalls]);
+ } catch {}
+ } else if (eventName === 'tool_call_end') {
+ try {
+ const data = JSON.parse(sseEvent.data);
+ const tc = toolCalls.find(
+ (t) => t.tool === data.tool && t.status === 'running',
+ );
+ if (tc) {
+ tc.status = data.success ? 'success' : 'error';
+ tc.latency = data.latency;
+ tc.result = data.result;
+ }
+ setStreamState({
+ phase: 'Generating...',
+ activeToolCalls: [...toolCalls],
+ });
+ updateLastAssistant(convId, accumulatedContent, [...toolCalls]);
+ } catch {}
+ } else {
+ try {
+ const data = JSON.parse(sseEvent.data);
+ const delta = data.choices?.[0]?.delta;
+ if (data.usage) usage = data.usage;
+ if (delta?.content) {
+ accumulatedContent += delta.content;
+ setStreamState({ content: accumulatedContent });
+ updateLastAssistant(
+ convId,
+ accumulatedContent,
+ toolCalls.length > 0 ? [...toolCalls] : undefined,
+ );
+ }
+ if (data.choices?.[0]?.finish_reason === 'stop') break;
+ } catch {}
+ }
+ }
+ } catch (err: any) {
+ if (err.name !== 'AbortError') {
+ accumulatedContent =
+ accumulatedContent || 'Error: Failed to get response.';
+ }
+ } finally {
+ if (!accumulatedContent) {
+ accumulatedContent = 'No response was generated. Please try again.';
+ }
+ updateLastAssistant(
+ convId,
+ accumulatedContent,
+ toolCalls.length > 0 ? toolCalls : undefined,
+ usage,
+ );
+ if (timerRef.current) {
+ clearInterval(timerRef.current);
+ timerRef.current = null;
+ }
+ resetStream();
+ abortRef.current = null;
+ }
+ }, [
+ input,
+ activeId,
+ selectedModel,
+ streamState.isStreaming,
+ createConversation,
+ addMessage,
+ updateLastAssistant,
+ setStreamState,
+ resetStream,
+ ]);
+
+ const handleKeyDown = (e: React.KeyboardEvent) => {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
- handleSend();
+ sendMessage();
}
};
- const handleInput = (e: React.ChangeEvent) => {
- const newValue = e.target.value;
- setTyped(newValue);
- // Auto-resize textarea
- const ta = e.target;
- ta.style.height = 'auto';
- ta.style.height = Math.min(ta.scrollHeight, 200) + 'px';
- };
-
- const handlePaste = useCallback(
- (e: React.ClipboardEvent) => {
- const pasted = e.clipboardData.getData('text');
- if (shouldCollapse(pasted)) {
- e.preventDefault();
- // Store long paste as an attachment pill
- setAttachment((prev) => (prev ? prev + '\n' + pasted : pasted));
- }
- // Short pastes go directly into the textarea as normal
- },
- [],
- );
-
- const handleClearAttachment = useCallback(() => {
- setAttachment('');
- textareaRef.current?.focus();
- }, []);
-
- const handleExpandAttachment = useCallback(() => {
- // Move attachment content back into the textarea
- setTyped((prev) => (attachment + (prev ? '\n' + prev : '')));
- setAttachment('');
- // Let React render, then resize
- setTimeout(() => {
- if (textareaRef.current) {
- textareaRef.current.style.height = 'auto';
- textareaRef.current.style.height =
- Math.min(textareaRef.current.scrollHeight, 200) + 'px';
- }
- }, 0);
- }, [attachment]);
-
- // Focus textarea after attachment changes
- useEffect(() => {
- textareaRef.current?.focus();
- }, [attachment]);
-
return (
-
-
- {serverInfo.model || 'unknown'}
-
- {serverInfo.agent && (
-
- {serverInfo.agent}
-
- )}
+
);
}
diff --git a/frontend/src/components/Chat/CopyButton.tsx b/frontend/src/components/Chat/CopyButton.tsx
deleted file mode 100644
index e4062f62..00000000
--- a/frontend/src/components/Chat/CopyButton.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { useState, useCallback } from 'react';
-
-interface CopyButtonProps {
- text: string;
-}
-
-export function CopyButton({ text }: CopyButtonProps) {
- const [copied, setCopied] = useState(false);
-
- const handleCopy = useCallback(async (e: React.MouseEvent) => {
- e.stopPropagation();
- try {
- await navigator.clipboard.writeText(text);
- setCopied(true);
- setTimeout(() => setCopied(false), 2000);
- } catch {
- // Fallback for non-secure contexts
- const ta = document.createElement('textarea');
- ta.value = text;
- document.body.appendChild(ta);
- ta.select();
- document.execCommand('copy');
- document.body.removeChild(ta);
- setCopied(true);
- setTimeout(() => setCopied(false), 2000);
- }
- }, [text]);
-
- return (
-
- );
-}
diff --git a/frontend/src/components/Chat/InputArea.tsx b/frontend/src/components/Chat/InputArea.tsx
index 812e3d08..ba9b48c7 100644
--- a/frontend/src/components/Chat/InputArea.tsx
+++ b/frontend/src/components/Chat/InputArea.tsx
@@ -1,159 +1,252 @@
import { useState, useRef, useCallback, useEffect } from 'react';
+import { Send, Square, Paperclip } from 'lucide-react';
+import { useAppStore, generateId } from '../../lib/store';
+import { streamChat } from '../../lib/sse';
+import type { ChatMessage, ToolCallInfo, TokenUsage } from '../../types';
-const COLLAPSE_CHAR_THRESHOLD = 500;
-const COLLAPSE_LINE_THRESHOLD = 6;
-
-function shouldCollapse(text: string): boolean {
- return (
- text.length > COLLAPSE_CHAR_THRESHOLD ||
- text.split('\n').length > COLLAPSE_LINE_THRESHOLD
- );
-}
-
-function formatSize(text: string): string {
- const chars = text.length;
- const lines = text.split('\n').length;
- if (chars >= 1000) {
- return `${(chars / 1000).toFixed(1)}k chars, ${lines} line${lines !== 1 ? 's' : ''}`;
- }
- return `${chars} chars, ${lines} line${lines !== 1 ? 's' : ''}`;
-}
-
-interface InputAreaProps {
- onSend: (content: string) => void;
- onStop: () => void;
- isStreaming: boolean;
-}
-
-export function InputArea({ onSend, onStop, isStreaming }: InputAreaProps) {
- // Pasted/long content stored separately as an "attachment"
- const [attachment, setAttachment] = useState('');
- // Text typed in the visible textarea
- const [typed, setTyped] = useState('');
+export function InputArea() {
+ const [input, setInput] = useState('');
const textareaRef = useRef
+
-
+ {isEmpty ? (
+
+ ) : (
+
+
+
+
- )}
- {totalTokens > 0 && (
-
- {totalPrompt.toLocaleString()} in / {totalCompletion.toLocaleString()} out
-
- )}
- + {getGreeting()} +
++ Ask anything. Your AI runs locally — private, fast, and always available. +
+
+ {messages.map((msg) => (
+
+ )}
+
+ )}
+
- {attachment && (
-
-
- )}
-
-
- Pasted text
- {formatSize(attachment)}
-
-
-
-
+
+