Function ChatInterface

src/components/ChatInterface.tsx:19–212

({
  dbPath,
  conversation,
  messages,
  availableModels,
  isLoadingMessages = false,
  onRefreshMessages,
  onConversationPatched,
}: ChatInterfaceProps)

}

export function ChatInterface({
  dbPath,
  conversation,
  messages,
  availableModels,
  isLoadingMessages = false,
  onRefreshMessages,
  onConversationPatched,
}: ChatInterfaceProps) {
  const [isStreaming, setIsStreaming] = useState(false);
  const [streamingContent, setStreamingContent] = useState('');
  const [error, setError] = useState<string | null>(null);
  const [pendingMessages, setPendingMessages] = useState<Message[]>([]);
  const [isStopping, setIsStopping] = useState(false);
  const lastSeqRef = useRef<number>(0);

  const visibleMessages = pendingMessages.length > 0
    ? [...messages, ...pendingMessages]
    : messages;

  useEffect(() => {
    if (pendingMessages.length === 0) return;

    const persistedUserMessages = new Set(
      messages
        .filter((message) => message.role === 'user')
        .map((message) => `${message.role}:${message.content}:${message.conversation_id}`)
    );

    setPendingMessages((current) =>
      current.filter((message) => !persistedUserMessages.has(`${message.role}:${message.content}:${message.conversation_id}`))
    );
  }, [messages, pendingMessages.length]);

  useEffect(() => {
    setPendingMessages([]);
    let unlisten: (() => void) | undefined;
    let mounted = true;

    const setupListener = async () => {
      const unlistenFn = await listen<{ conversation_id?: string; content: string; seq?: number }>('chat-token', (event) => {
        if (!mounted) return;
        if (event.payload.conversation_id && event.payload.conversation_id !== conversation.id) return;

        const { content, seq } = event.payload;
        if (content === undefined || content === null || content === '') return;

        if (seq !== undefined) {
          if (seq <= lastSeqRef.current) return;
          lastSeqRef.current = seq;
        }

        setStreamingContent((prev) => prev + content);
      });

      return unlistenFn;
    };