Function ChatInput

web/components/chat/ChatInput.tsx:14–180

({ conversationId }: ChatInputProps)

}

export function ChatInput({ conversationId }: ChatInputProps) {
  const [input, setInput] = useState("");
  const [isStreaming, setIsStreaming] = useState(false);
  const textareaRef = useRef<HTMLTextAreaElement>(null);
  const abortRef = useRef<AbortController | null>(null);

  const { conversations, settings, addMessage, updateMessage } = useChatStore();
  const conversation = conversations.find((c) => c.id === conversationId);

  const handleSubmit = useCallback(async () => {
    const text = input.trim();
    if (!text || isStreaming) return;

    setInput("");
    setIsStreaming(true);

    // Add user message
    addMessage(conversationId, {
      role: "user",
      content: text,
      status: "complete",
    });

    // Add placeholder assistant message
    const assistantId = addMessage(conversationId, {
      role: "assistant",
      content: "",
      status: "streaming",
    });

    const controller = new AbortController();
    abortRef.current = controller;

    const messages = [
      ...(conversation?.messages ?? []).map((m) => ({
        role: m.role,
        content: m.content,
      })),
      { role: "user" as const, content: text },
    ];

    let fullText = "";

    try {
      for await (const chunk of streamChat(messages, settings.model, controller.signal)) {
        if (chunk.type === "text" && chunk.content) {
          fullText += chunk.content;
          updateMessage(conversationId, assistantId, {
            content: fullText,
            status: "streaming",
          });
        } else if (chunk.type === "done") {
          break;
        } else if (chunk.type === "error") {
          updateMessage(conversationId, assistantId, {
            content: chunk.error ?? "An error occurred",
            status: "error",
          });