@hed-hog/core 0.0.349 → 0.0.350

package/hedhog/frontend/app/mcp_chat/page.tsx.ejs

@@ -12,232 +12,70 @@ import {
 } from '@/components/ui/alert-dialog';
 import { Button } from '@/components/ui/button';
 import { ScrollArea } from '@/components/ui/scroll-area';
-import { Textarea } from '@/components/ui/textarea';
-import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import {
-  Bot,
-  ChevronDown,
-  ChevronRight,
-  MessageSquare,
-  Plus,
-  Send,
-  Trash2,
-  Wrench,
-} from 'lucide-react';
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { SidebarTrigger } from '@/components/ui/sidebar';
+import { useFormDraft } from '@/hooks/use-form-draft';
+import { useIsMobile } from '@/hooks/use-mobile';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { Bot, MessageSquare } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { useEffect, useRef, useState } from 'react';
-import ReactMarkdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { toast } from 'sonner';
-
-type Conversation = {
-  id: number;
-  title: string | null;
-  created_at: string;
-  updated_at: string;
-};
-
-type Message = {
-  id: number;
-  conversation_id: number;
-  role: 'user' | 'assistant' | 'tool_call' | 'tool_result';
-  content: string;
-  tool_name: string | null;
-  tool_call_id: string | null;
-  created_at: string;
-};
-
-type MarkdownComponentProps = {
-  children?: React.ReactNode;
-  className?: string;
-  href?: string;
-};
-
-const markdownComponents: Record<
-  string,
-  (props: MarkdownComponentProps) => React.ReactNode
-> = {
-  p({ children }) {
-    return <p className="mb-2 last:mb-0 leading-relaxed">{children}</p>;
-  },
-  ul({ children }) {
-    return <ul className="mb-2 list-disc pl-4 space-y-1">{children}</ul>;
-  },
-  ol({ children }) {
-    return <ol className="mb-2 list-decimal pl-4 space-y-1">{children}</ol>;
-  },
-  li({ children }) {
-    return <li className="leading-relaxed">{children}</li>;
-  },
-  strong({ children }) {
-    return <strong className="font-semibold">{children}</strong>;
-  },
-  em({ children }) {
-    return <em className="italic">{children}</em>;
-  },
-  code({ children, className }) {
-    const isBlock = className?.includes('language-');
-    return isBlock ? (
-      <code className="block rounded-md bg-black/10 dark:bg-white/10 px-3 py-2 text-xs font-mono whitespace-pre-wrap my-2">
-        {children}
-      </code>
-    ) : (
-      <code className="rounded bg-black/10 dark:bg-white/10 px-1 py-0.5 text-xs font-mono">
-        {children}
-      </code>
-    );
-  },
-  pre({ children }) {
-    return <pre className="my-2 overflow-x-auto rounded-md">{children}</pre>;
-  },
-  blockquote({ children }) {
-    return (
-      <blockquote className="border-l-2 border-current/30 pl-3 italic my-2 text-current/70">
-        {children}
-      </blockquote>
-    );
-  },
-  h1({ children }) {
-    return (
-      <h1 className="text-base font-bold mb-2 mt-3 first:mt-0">{children}</h1>
-    );
-  },
-  h2({ children }) {
-    return (
-      <h2 className="text-sm font-bold mb-2 mt-3 first:mt-0">{children}</h2>
-    );
-  },
-  h3({ children }) {
-    return (
-      <h3 className="text-sm font-semibold mb-1 mt-2 first:mt-0">{children}</h3>
-    );
-  },
-  a({ href, children }) {
-    return (
-      <a
-        href={href}
-        target="_blank"
-        rel="noopener noreferrer"
-        className="underline underline-offset-2 hover:opacity-80"
-      >
-        {children}
-      </a>
-    );
-  },
-  hr() {
-    return <hr className="my-3 border-current/20" />;
-  },
-  table({ children }) {
-    return (
-      <div className="my-2 overflow-x-auto">
-        <table className="text-xs border-collapse w-full">{children}</table>
-      </div>
-    );
-  },
-  th({ children }) {
-    return (
-      <th className="border border-current/20 px-2 py-1 font-semibold text-left bg-current/5">
-        {children}
-      </th>
-    );
-  },
-  td({ children }) {
-    return <td className="border border-current/20 px-2 py-1">{children}</td>;
-  },
-};
-
-function ToolBadge({
-  message,
-  variant,
-}: {
-  message: Message;
-  variant: 'call' | 'result';
-}) {
-  const [expanded, setExpanded] = useState(false);
-  let parsed: unknown;
-  try {
-    parsed = JSON.parse(message.content);
-  } catch {
-    parsed = message.content;
-  }
-
-  const colorClass =
-    variant === 'call'
-      ? 'border-violet-200 bg-violet-50 text-violet-700 dark:border-violet-800 dark:bg-violet-950 dark:text-violet-300'
-      : 'border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-800 dark:bg-emerald-950 dark:text-emerald-300';
-
-  const preClass =
-    variant === 'call'
-      ? 'border-violet-100 bg-violet-50/50 text-violet-800 dark:border-violet-900 dark:bg-violet-950/50 dark:text-violet-200'
-      : 'border-emerald-100 bg-emerald-50/50 text-emerald-800 dark:border-emerald-900 dark:bg-emerald-950/50 dark:text-emerald-200';
-
-  return (
-    <div className="my-1 flex flex-col items-start">
-      <button
-        type="button"
-        className={`inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium transition-colors hover:opacity-80 ${colorClass}`}
-        onClick={() => setExpanded((v) => !v)}
-      >
-        <Wrench className="h-3 w-3 shrink-0" />
-        <span className="font-mono">{message.tool_name}</span>
-        {expanded ? (
-          <ChevronDown className="h-3 w-3 shrink-0" />
-        ) : (
-          <ChevronRight className="h-3 w-3 shrink-0" />
-        )}
-      </button>
-      {expanded && (
-        <pre
-          className={`mt-1.5 w-full max-w-lg rounded-lg border px-3 py-2 text-xs font-mono overflow-x-auto whitespace-pre-wrap ${preClass}`}
-        >
-          {typeof parsed === 'string'
-            ? parsed
-            : JSON.stringify(parsed, null, 2)}
-        </pre>
-      )}
-    </div>
-  );
-}
-
-function TypingIndicator() {
-  return (
-    <div className="flex items-start gap-3">
-      <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-muted ring-2 ring-background">
-        <Bot className="h-4 w-4 text-muted-foreground" />
-      </div>
-      <div className="flex items-center gap-1 rounded-2xl rounded-tl-sm bg-muted px-4 py-3 shadow-sm">
-        <span
-          className="h-1.5 w-1.5 rounded-full bg-muted-foreground/60 animate-bounce"
-          style={{ animationDelay: '0ms' }}
-        />
-        <span
-          className="h-1.5 w-1.5 rounded-full bg-muted-foreground/60 animate-bounce"
-          style={{ animationDelay: '150ms' }}
-        />
-        <span
-          className="h-1.5 w-1.5 rounded-full bg-muted-foreground/60 animate-bounce"
-          style={{ animationDelay: '300ms' }}
-        />
-      </div>
-    </div>
-  );
-}
+import { ChatInput, ConversationSidebar, MessageFeed } from './chat-components';
+import { Conversation, Message } from './chat-types';
 
 export default function McpChatPage() {
-  const { request, currentLocaleCode, refetchUser } = useApp();
+  const { request, currentLocaleCode, refetchUser, accessToken } = useApp();
   const t = useTranslations('core.McpChatPage');
+  const isMobile = useIsMobile();
 
   const [selectedConvId, setSelectedConvId] = useState<number | null>(null);
   const [messages, setMessages] = useState<Message[]>([]);
   const [input, setInput] = useState('');
+  const [attachments, setAttachments] = useState<
+    Array<{ id: number; name: string }>
+  >([]);
+  const [isUploadingFile, setIsUploadingFile] = useState(false);
   const [isSending, setIsSending] = useState(false);
+  const [isStreamingResponse, setIsStreamingResponse] = useState(false);
+  const [isLoadingMessages, setIsLoadingMessages] = useState(false);
+  const [isMobileConversationsOpen, setIsMobileConversationsOpen] =
+    useState(false);
   const [convToDelete, setConvToDelete] = useState<Conversation | null>(null);
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const streamingTimeoutRef = useRef<number | null>(null);
+  const streamingRunRef = useRef(0);
+  const streamAbortRef = useRef<AbortController | null>(null);
 
-  const { data: conversations, refetch: refetchConvs } = useQuery<
-    Conversation[]
-  >({
+  const selectedConversationDraft = useFormDraft<number | null>({
+    storageKey: 'mcp-chat-selected-conversation-draft',
+    value: selectedConvId,
+    hasData: selectedConvId !== null,
+    debounceMs: 250,
+  });
+
+  const {
+    clearDraft: clearMessageInputDraft,
+    loadDraft: loadMessageInputDraft,
+  } = useFormDraft<string>({
+    storageKey: `mcp-chat-input-${selectedConvId ?? 'new'}-draft`,
+    value: input,
+    hasData: input.trim().length > 0,
+    debounceMs: 300,
+  });
+
+  const {
+    data: conversations,
+    refetch: refetchConvs,
+    isLoading: isLoadingConversations,
+  } = useQuery<Conversation[]>({
     queryKey: ['mcp-chat-conversations', currentLocaleCode],
     queryFn: async () => {
       const res = await request<Conversation[]>({
@@ -248,33 +86,306 @@ export default function McpChatPage() {
     },
   });
 
-  const convList = conversations ?? [];
+  const convList = useMemo(() => conversations ?? [], [conversations]);
   const selectedConv = convList.find((c) => c.id === selectedConvId) ?? null;
 
   useEffect(() => {
-    if (!selectedConvId) return;
+    if (selectedConvId !== null || convList.length === 0) return;
+    const draft = selectedConversationDraft.loadDraft();
+    const draftConvId = draft?.payload;
+    if (typeof draftConvId !== 'number') return;
+
+    if (convList.some((conv) => conv.id === draftConvId)) {
+      setSelectedConvId(draftConvId);
+      return;
+    }
+
+    selectedConversationDraft.clearDraft();
+  }, [convList, selectedConvId, selectedConversationDraft]);
+
+  useEffect(() => {
+    const draft = loadMessageInputDraft();
+    if (typeof draft?.payload === 'string') {
+      setInput(draft.payload);
+      return;
+    }
+
+    setInput('');
+  }, [selectedConvId, loadMessageInputDraft]);
+
+  useEffect(() => {
+    if (!selectedConvId) {
+      setMessages([]);
+      setIsLoadingMessages(false);
+      return;
+    }
+
+    let isMounted = true;
+    setIsLoadingMessages(true);
+
     request<Message[]>({
       url: `/mcp-chat/${selectedConvId}/messages`,
       method: 'GET',
     })
-      .then((res) => setMessages(res.data))
-      .catch(() => setMessages([]));
-  }, [selectedConvId]);
+      .then((res) => {
+        if (isMounted) {
+          setMessages(res.data);
+        }
+      })
+      .catch(() => {
+        if (isMounted) {
+          setMessages([]);
+          toast.error(t('loadMessagesError'));
+        }
+      })
+      .finally(() => {
+        if (isMounted) {
+          setIsLoadingMessages(false);
+        }
+      });
+
+    return () => {
+      isMounted = false;
+    };
+  }, [request, selectedConvId, t]);
 
   useEffect(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-  }, [messages, isSending]);
+  }, [messages, isSending, isLoadingMessages, isStreamingResponse]);
+
+  function stopStreaming() {
+    streamingRunRef.current += 1;
+    if (streamAbortRef.current) {
+      streamAbortRef.current.abort();
+      streamAbortRef.current = null;
+    }
+    if (streamingTimeoutRef.current !== null) {
+      window.clearTimeout(streamingTimeoutRef.current);
+      streamingTimeoutRef.current = null;
+    }
+    setIsStreamingResponse(false);
+  }
+
+  useEffect(() => {
+    return () => {
+      if (streamAbortRef.current) {
+        streamAbortRef.current.abort();
+      }
+      if (streamingTimeoutRef.current !== null) {
+        window.clearTimeout(streamingTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  async function streamAssistantMessage(responseMessages: Message[]) {
+    const lastAssistantIdx = [...responseMessages]
+      .map((msg, idx) => ({ msg, idx }))
+      .reverse()
+      .find(({ msg }) => msg.role === 'assistant')?.idx;
+
+    if (lastAssistantIdx === undefined) {
+      setMessages(responseMessages);
+      return;
+    }
+
+    const target = responseMessages[lastAssistantIdx] as Message;
+    const fullContent = target.content ?? '';
+
+    if (fullContent.length < 24) {
+      setMessages(responseMessages);
+      return;
+    }
+
+    stopStreaming();
+    const runId = ++streamingRunRef.current;
+    setIsStreamingResponse(true);
+
+    const baseMessages: Message[] = responseMessages.map(
+      (msg, idx): Message =>
+        idx === lastAssistantIdx ? { ...msg, content: '' } : msg
+    );
+    setMessages(baseMessages);
+
+    await new Promise<void>((resolve) => {
+      let cursor = 0;
+      const chunkSize = Math.max(
+        8,
+        Math.min(32, Math.ceil(fullContent.length / 80))
+      );
+
+      const tick = () => {
+        if (streamingRunRef.current !== runId) {
+          resolve();
+          return;
+        }
+
+        cursor = Math.min(fullContent.length, cursor + chunkSize);
+        const nextMessages: Message[] = responseMessages.map(
+          (msg, idx): Message =>
+            idx === lastAssistantIdx
+              ? { ...target, content: fullContent.slice(0, cursor) }
+              : msg
+        );
+        setMessages(nextMessages);
+
+        if (cursor >= fullContent.length) {
+          resolve();
+          return;
+        }
+
+        streamingTimeoutRef.current = window.setTimeout(tick, 16);
+      };
+
+      tick();
+    });
+
+    if (streamingRunRef.current === runId) {
+      setMessages(responseMessages);
+      setIsStreamingResponse(false);
+      streamingTimeoutRef.current = null;
+    }
+  }
+
+  async function sendMessageViaStream(
+    conversationId: number,
+    message: string,
+    tempAssistantId: number
+  ): Promise<Message[] | null> {
+    const rawBase = process.env.NEXT_PUBLIC_API_BASE_URL || '/api';
+    const apiBase = rawBase.replace(/\/$/, '');
+    const url = `${apiBase}/mcp-chat/${conversationId}/messages/stream`;
+
+    const controller = new AbortController();
+    streamAbortRef.current = controller;
+    setIsStreamingResponse(true);
+
+    const headers: Record<string, string> = {
+      'Content-Type': 'application/json',
+      Accept: 'text/event-stream',
+      'Accept-Language': currentLocaleCode,
+    };
+
+    if (accessToken) {
+      headers.Authorization = `Bearer ${accessToken}`;
+    }
+
+    const response = await fetch(url, {
+      method: 'POST',
+      headers,
+      body: JSON.stringify({ message }),
+      signal: controller.signal,
+    });
+
+    if (!response.ok || !response.body) {
+      throw new Error(`stream-unavailable:${response.status}`);
+    }
+
+    let accumulated = '';
+    setMessages((prev) => [
+      ...prev,
+      {
+        id: tempAssistantId,
+        conversation_id: conversationId,
+        role: 'assistant',
+        content: '',
+        tool_name: null,
+        tool_call_id: null,
+        created_at: new Date().toISOString(),
+      },
+    ]);
+
+    const reader = response.body.getReader();
+    const decoder = new TextDecoder();
+    let buffer = '';
+    let doneMessages: Message[] | null = null;
+
+    while (true) {
+      const { value, done } = await reader.read();
+      if (done) break;
+
+      buffer += decoder.decode(value, { stream: true });
+      const events = buffer.split('\n\n');
+      buffer = events.pop() ?? '';
+
+      for (const eventBlock of events) {
+        const dataLines = eventBlock
+          .split('\n')
+          .filter((line) => line.startsWith('data:'))
+          .map((line) => line.slice(5).trim());
+
+        if (dataLines.length === 0) continue;
+        const payloadText = dataLines.join('\n');
+
+        let payload: {
+          type?: 'chunk' | 'done' | 'error';
+          content?: string;
+          message?: string;
+          messages?: Message[];
+        };
+        try {
+          payload = JSON.parse(payloadText);
+        } catch {
+          continue;
+        }
+
+        if (payload.type === 'chunk') {
+          const chunk = payload.content ?? '';
+          if (!chunk) continue;
+          accumulated += chunk;
+          setMessages((prev) =>
+            prev.map((msg) =>
+              msg.id === tempAssistantId
+                ? { ...msg, content: accumulated }
+                : msg
+            )
+          );
+        }
+
+        if (payload.type === 'done' && Array.isArray(payload.messages)) {
+          doneMessages = payload.messages;
+        }
+
+        if (payload.type === 'error') {
+          throw new Error(payload.message || 'stream-error');
+        }
+      }
+    }
+
+    return doneMessages;
+  }
 
   // Auto-resize textarea
   useEffect(() => {
-    if (textareaRef.current) {
-      textareaRef.current.style.height = 'auto';
-      textareaRef.current.style.height = `${Math.min(textareaRef.current.scrollHeight, 300)}px`;
+    const textarea = textareaRef.current;
+    if (!textarea) {
+      return;
     }
-  }, [input]);
+
+    textarea.style.height = 'auto';
+    const maxHeight = isMobile ? 160 : 300;
+    const nextHeight = Math.min(textarea.scrollHeight, maxHeight);
+
+    const frameId = window.requestAnimationFrame(() => {
+      textarea.style.height = `${nextHeight}px`;
+    });
+
+    return () => {
+      window.cancelAnimationFrame(frameId);
+    };
+  }, [input, isMobile]);
+
+  function handleSelectConversation(convId: number) {
+    stopStreaming();
+    setSelectedConvId(convId);
+    setMessages([]);
+    if (isMobile) {
+      setIsMobileConversationsOpen(false);
+    }
+  }
 
   async function handleNewConversation() {
     try {
+      stopStreaming();
       const res = await request<Conversation>({
         url: '/mcp-chat',
         method: 'POST',
@@ -283,15 +394,24 @@ export default function McpChatPage() {
       await refetchConvs();
       setSelectedConvId(res.data.id);
       setMessages([]);
+      setInput('');
+      if (isMobile) {
+        setIsMobileConversationsOpen(false);
+      }
       return res.data.id;
     } catch {
-      toast.error('Failed to create conversation');
+      toast.error(t('createConversationError'));
       return null;
     }
   }
 
   async function handleSend() {
-    if (!input.trim() || isSending) return;
+    if (
+      (!input.trim() && attachments.length === 0) ||
+      isSending ||
+      isUploadingFile
+    )
+      return;
     let activeConvId = selectedConvId;
     if (!activeConvId) {
       activeConvId = await handleNewConversation();
@@ -299,15 +419,27 @@ export default function McpChatPage() {
     }
     setIsSending(true);
     const currentInput = input;
+    const currentAttachments = attachments;
+    const tempId = -Date.now();
+    const attachmentsBlock =
+      currentAttachments.length > 0
+        ? `\n\n${t('attachedFilesPrefix')}\n${currentAttachments
+            .map((file) => `- ${file.name} (file_id: ${file.id})`)
+            .join('\n')}`
+        : '';
+    const payloadMessage = `${currentInput.trim()}${attachmentsBlock}`.trim();
+
     setInput('');
+    setAttachments([]);
+    clearMessageInputDraft();
 
     setMessages((prev) => [
       ...prev,
       {
-        id: -Date.now(),
+        id: tempId,
         conversation_id: activeConvId!,
         role: 'user',
-        content: currentInput,
+        content: payloadMessage,
         tool_name: null,
         tool_call_id: null,
         created_at: new Date().toISOString(),
@@ -315,25 +447,101 @@ export default function McpChatPage() {
     ]);
 
     try {
-      const res = await request<Message[]>({
-        url: `/mcp-chat/${activeConvId}/messages`,
-        method: 'POST',
-        data: { message: currentInput },
-      });
-      setMessages(res.data);
+      stopStreaming();
+      const tempAssistantId = -(Date.now() + 1);
+      let finalMessages: Message[] | null = null;
+
+      try {
+        finalMessages = await sendMessageViaStream(
+          activeConvId,
+          payloadMessage,
+          tempAssistantId
+        );
+      } catch {
+        setMessages((prev) => prev.filter((m) => m.id !== tempAssistantId));
+
+        const fallbackRes = await request<Message[]>({
+          url: `/mcp-chat/${activeConvId}/messages`,
+          method: 'POST',
+          data: { message: payloadMessage },
+        });
+        finalMessages = fallbackRes.data;
+        await streamAssistantMessage(finalMessages);
+      }
+
+      if (finalMessages) {
+        setMessages(finalMessages);
+      }
+
       await refetchConvs();
-      const hadToolUse = res.data.some(
+      const hadToolUse = (finalMessages ?? []).some(
         (m) => m.role === 'tool_call' || m.role === 'tool_result'
       );
       if (hadToolUse) await refetchUser();
     } catch {
-      toast.error('Failed to send message');
-      setMessages((prev) => prev.filter((m) => m.id !== -Date.now()));
+      toast.error(t('sendMessageError'));
+      setMessages((prev) => prev.filter((m) => m.id !== tempId));
+      setInput(currentInput);
+      setAttachments(currentAttachments);
     } finally {
+      streamAbortRef.current = null;
+      setIsStreamingResponse(false);
       setIsSending(false);
     }
   }
 
+  const uploadAttachment = async (file: File) => {
+    const existingNames = new Set(attachments.map((item) => item.name));
+    if (existingNames.has(file.name)) {
+      return;
+    }
+
+    setIsUploadingFile(true);
+    try {
+      const formData = new FormData();
+      formData.append('file', file);
+      formData.append('destination', 'mcp-chat/attachments');
+
+      const { data } = await request<{ id: number; filename?: string }>({
+        url: '/file',
+        method: 'POST',
+        data: formData,
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+      });
+
+      if (!data?.id) {
+        throw new Error('invalid-file-id');
+      }
+
+      setAttachments((prev) => [
+        ...prev,
+        {
+          id: data.id,
+          name: data.filename || file.name,
+        },
+      ]);
+    } catch {
+      toast.error(t('uploadFileError'));
+    } finally {
+      setIsUploadingFile(false);
+    }
+  };
+
+  const handleUploadFiles = (files: FileList) => {
+    const queue = Array.from(files);
+    void (async () => {
+      for (const file of queue) {
+        await uploadAttachment(file);
+      }
+    })();
+  };
+
+  const handleRemoveAttachment = (id: number) => {
+    setAttachments((prev) => prev.filter((item) => item.id !== id));
+  };
+
   async function handleDeleteConversation() {
     if (!convToDelete) return;
     try {
@@ -342,121 +550,83 @@ export default function McpChatPage() {
         method: 'DELETE',
         data: { ids: [convToDelete.id] },
       });
-      toast.success('Conversation deleted');
+      toast.success(t('deleteConversationSuccess'));
       if (selectedConvId === convToDelete.id) {
         setSelectedConvId(null);
         setMessages([]);
+        setInput('');
       }
       setConvToDelete(null);
       await refetchConvs();
     } catch {
-      toast.error('Failed to delete conversation');
+      toast.error(t('deleteConversationError'));
     }
   }
 
-  const inputArea = (
-    <div className="relative flex items-end gap-2 rounded-2xl bg-background px-5 py-4">
-      <Textarea
-        ref={textareaRef}
-        className="resize-none flex-1 border-0 shadow-none focus-visible:ring-0 p-3 min-h-6 max-h-75 overflow-y-auto text-sm leading-relaxed bg-transparent"
-        placeholder={t('placeholder')}
-        value={input}
-        disabled={isSending}
-        onChange={(e) => setInput(e.target.value)}
-        onKeyDown={(e) => {
-          if (e.key === 'Enter' && !e.shiftKey) {
-            e.preventDefault();
-            void handleSend();
-          }
-        }}
-        rows={1}
-      />
-      <Button
-        size="icon"
-        className="shrink-0 h-8 w-8 rounded-xl cursor-pointer"
-        disabled={isSending || !input.trim()}
-        onClick={() => void handleSend()}
-      >
-        <Send className="h-3.5 w-3.5" />
-      </Button>
-    </div>
+  const sidebarContent = (
+    <ConversationSidebar
+      conversations={convList}
+      selectedConvId={selectedConvId}
+      isLoading={isLoadingConversations}
+      emptyLabel={t('emptyConversations')}
+      conversationsLabel={t('conversations')}
+      newConversationLabel={t('newConversation')}
+      onCreate={() => {
+        void handleNewConversation();
+      }}
+      onSelect={handleSelectConversation}
+      onDelete={setConvToDelete}
+    />
   );
 
   return (
-    <div className="flex h-screen overflow-hidden bg-background">
+    <div className="flex h-dvh min-h-0 overflow-hidden bg-background">
       {/* Sidebar */}
-      <aside className="w-64 shrink-0 flex flex-col border-r bg-muted/30">
-        <div className="p-3 border-b bg-background/50">
-          <Button
-            variant="outline"
-            className="w-full justify-start gap-2 cursor-pointer rounded-xl h-9 text-sm font-medium"
-            onClick={handleNewConversation}
-          >
-            <Plus className="h-4 w-4" />
-            {t('newConversation')}
-          </Button>
-        </div>
-        <div className="px-4 pt-4 pb-1.5">
-          <p className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">
-            {t('conversations')}
-          </p>
-        </div>
-        <ScrollArea className="flex-1 px-2 pb-2">
-          {convList.length === 0 ? (
-            <div className="flex flex-col items-center gap-2 py-8 px-4 text-center">
-              <MessageSquare className="h-8 w-8 text-muted-foreground/40" />
-              <p className="text-xs text-muted-foreground">
-                {t('emptyConversations')}
-              </p>
-            </div>
-          ) : (
-            <div className="space-y-0.5 pt-1">
-              {convList.map((conv) => (
-                <div
-                  key={conv.id}
-                  className={`group flex items-center justify-between rounded-xl px-3 py-2 cursor-pointer transition-colors text-sm ${
-                    selectedConvId === conv.id
-                      ? 'bg-primary text-primary-foreground'
-                      : 'hover:bg-accent text-foreground'
-                  }`}
-                  onClick={() => {
-                    setSelectedConvId(conv.id);
-                    setMessages([]);
-                  }}
-                >
-                  <div className="flex items-center gap-2 min-w-0 flex-1">
-                    <MessageSquare className="h-3.5 w-3.5 shrink-0 opacity-60" />
-                    <span className="truncate text-xs font-medium">
-                      {conv.title || `#${conv.id}`}
-                    </span>
-                  </div>
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    className={`h-6 w-6 opacity-0 group-hover:opacity-100 shrink-0 cursor-pointer transition-opacity ${
-                      selectedConvId === conv.id
-                        ? 'hover:bg-primary-foreground/20 text-primary-foreground'
-                        : 'hover:bg-destructive/10 hover:text-destructive'
-                    }`}
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      setConvToDelete(conv);
-                    }}
-                  >
-                    <Trash2 className="h-3 w-3" />
-                  </Button>
-                </div>
-              ))}
-            </div>
-          )}
-        </ScrollArea>
+      <aside className="hidden md:flex w-64 shrink-0 flex-col border-r bg-muted/30">
+        {sidebarContent}
       </aside>
 
+      <Sheet
+        open={isMobileConversationsOpen}
+        onOpenChange={setIsMobileConversationsOpen}
+      >
+        <SheetContent
+          side="left"
+          className="w-[85vw] max-w-[320px] p-0 [&>button]:top-2 [&>button]:right-2 [&>button]:z-20"
+        >
+          <SheetHeader className="sr-only">
+            <SheetTitle>{t('conversations')}</SheetTitle>
+            <SheetDescription>{t('openConversations')}</SheetDescription>
+          </SheetHeader>
+          <div className="flex h-full flex-col bg-muted/30 pt-11">
+            {sidebarContent}
+          </div>
+        </SheetContent>
+      </Sheet>
+
       {/* Main area */}
-      <main className="flex-1 flex flex-col overflow-hidden min-w-0">
+      <main className="flex-1 flex min-h-0 min-w-0 flex-col overflow-hidden">
+        {isMobile && (
+          <header className="h-12 shrink-0 border-b flex items-center px-3 gap-2 bg-background/90 backdrop-blur-sm md:hidden">
+            <SidebarTrigger className="h-8 w-8 cursor-pointer" />
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-8 w-8 cursor-pointer"
+              onClick={() => setIsMobileConversationsOpen(true)}
+              aria-label={t('openConversations')}
+            >
+              <MessageSquare className="h-4 w-4" />
+            </Button>
+            <span className="text-sm font-medium truncate">
+              {selectedConv?.title || t('title')}
+            </span>
+          </header>
+        )}
+
         {!selectedConvId ? (
           /* Empty state */
-          <div className="flex flex-1 flex-col items-center justify-center gap-8 px-6">
+          <div className="flex flex-1 flex-col items-center justify-center gap-6 px-4 md:gap-8 md:px-6">
             <div className="flex flex-col items-center gap-3 text-center">
               <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-primary/10 ring-1 ring-primary/20">
                 <Bot className="h-8 w-8 text-primary" />
@@ -468,13 +638,34 @@ export default function McpChatPage() {
                 {t('description')}
               </p>
             </div>
-            <div className="w-full max-w-2xl">{inputArea}</div>
+            <div className="w-full max-w-2xl px-1 pb-[max(0.5rem,env(safe-area-inset-bottom))] md:px-0 md:pb-0">
+              <ChatInput
+                textareaRef={textareaRef}
+                submitOnEnter={!isMobile}
+                input={input}
+                isSending={isSending}
+                isUploadingFile={isUploadingFile}
+                attachments={attachments}
+                placeholder={t('placeholder')}
+                sendLabel={t('send')}
+                sendingLabel={t('sending')}
+                attachLabel={t('attachFile')}
+                uploadingFileLabel={t('uploadingFile')}
+                removeAttachmentLabel={t('removeAttachment')}
+                onInputChange={setInput}
+                onSend={() => {
+                  void handleSend();
+                }}
+                onUploadFiles={handleUploadFiles}
+                onRemoveAttachment={handleRemoveAttachment}
+              />
+            </div>
           </div>
         ) : (
           /* Chat state */
           <>
             {/* Header */}
-            <header className="h-14 shrink-0 border-b flex items-center px-6 gap-3 bg-background/80 backdrop-blur-sm">
+            <header className="h-14 shrink-0 border-b items-center px-4 md:px-6 gap-3 bg-background/80 backdrop-blur-sm hidden md:flex">
               <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary/10">
                 <Bot className="h-4 w-4 text-primary" />
               </div>
@@ -489,60 +680,40 @@ export default function McpChatPage() {
             </header>
 
             {/* Messages */}
-            <ScrollArea className="flex-1 min-h-0 px-4 py-6">
-              <div className="flex flex-col gap-4 max-w-3xl mx-auto">
-                {messages.map((msg, idx) => {
-                  if (msg.role === 'tool_call') {
-                    return (
-                      <ToolBadge
-                        key={msg.id ?? idx}
-                        message={msg}
-                        variant="call"
-                      />
-                    );
-                  }
-                  if (msg.role === 'tool_result') {
-                    return (
-                      <ToolBadge
-                        key={msg.id ?? idx}
-                        message={msg}
-                        variant="result"
-                      />
-                    );
-                  }
-                  if (msg.role === 'user') {
-                    return (
-                      <div key={msg.id ?? idx} className="flex justify-end">
-                        <div className="max-w-[75%] rounded-2xl rounded-tr-md bg-primary px-4 py-2.5 text-sm text-primary-foreground shadow-sm">
-                          {msg.content}
-                        </div>
-                      </div>
-                    );
-                  }
-                  return (
-                    <div key={msg.id ?? idx} className="flex items-start gap-3">
-                      <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-muted ring-2 ring-background shadow-sm">
-                        <Bot className="h-4 w-4 text-muted-foreground" />
-                      </div>
-                      <div className="max-w-[75%] rounded-2xl rounded-tl-md bg-muted px-4 py-2.5 text-sm shadow-sm prose-sm">
-                        <ReactMarkdown
-                          remarkPlugins={[remarkGfm]}
-                          components={markdownComponents as never}
-                        >
-                          {msg.content}
-                        </ReactMarkdown>
-                      </div>
-                    </div>
-                  );
-                })}
-                {isSending && <TypingIndicator />}
-                <div ref={messagesEndRef} />
-              </div>
+            <ScrollArea className="min-h-0 flex-1 px-3 py-4 md:px-4 md:py-6">
+              <MessageFeed
+                messages={messages}
+                isLoadingMessages={isLoadingMessages}
+                isSending={isSending}
+                isStreamingResponse={isStreamingResponse}
+                messagesEndRef={messagesEndRef}
+              />
             </ScrollArea>
 
             {/* Input */}
-            <div className="shrink-0 border-t bg-background/80 backdrop-blur-sm px-6 py-4">
-              <div className="max-w-3xl mx-auto">{inputArea}</div>
+            <div className="shrink-0 border-t bg-background/80 px-3 py-3 pb-[max(0.75rem,env(safe-area-inset-bottom))] backdrop-blur-sm md:px-6 md:py-4">
+              <div className="max-w-3xl mx-auto">
+                <ChatInput
+                  textareaRef={textareaRef}
+                  submitOnEnter={!isMobile}
+                  input={input}
+                  isSending={isSending}
+                  isUploadingFile={isUploadingFile}
+                  attachments={attachments}
+                  placeholder={t('placeholder')}
+                  sendLabel={t('send')}
+                  sendingLabel={t('sending')}
+                  attachLabel={t('attachFile')}
+                  uploadingFileLabel={t('uploadingFile')}
+                  removeAttachmentLabel={t('removeAttachment')}
+                  onInputChange={setInput}
+                  onSend={() => {
+                    void handleSend();
+                  }}
+                  onUploadFiles={handleUploadFiles}
+                  onRemoveAttachment={handleRemoveAttachment}
+                />
+              </div>
             </div>
           </>
         )}