Feature/101/scrool underside

apps/extension/src/components/ChatArea.tsx

@@ -1,18 +1,25 @@
-import { useEffect } from "react";
+import { useEffect, useRef, useCallback } from "react";
 import { ModelResponse } from "./ModelResponse";
 import { UserQuery } from "./UserQuery";
 import { useChat } from "@/hooks/useChat";
 
 export const ChatArea = () => {
   const { messages, isLoading } = useChat();
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const scrollToBottom = useCallback(() => {
+    if (messages.length === 0 && !isLoading) return;
+    const el = containerRef.current;
+    if (el) el.scrollTo({ top: el.scrollHeight, behavior: "smooth" });
+  }, [messages.length, isLoading]);
 
   useEffect(() => {
-    console.log(messages);
-  }, [messages]);
+    scrollToBottom();
+  }, [scrollToBottom]);
 
   return (
-    <div className="grow overflow-y-auto p-4">
-      <div className="flex grow flex-col gap-4">
+    <div ref={containerRef} className="chat-scroll grow overflow-y-auto p-4">
+      <div className="flex flex-col gap-4">
         {messages.map((m) =>
           m.role === "user" ? (
             <UserQuery key={m.id} content={m.content} />

apps/extension/src/components/ChatInput.tsx

@@ -35,7 +35,7 @@ export const ChatInput = () => {
         <div className="flex flex-col">
           <div className="whitespace-pre-wrap">
             <textarea
-              className="w-full resize-none bg-transparent p-4 leading-6 focus:outline-none"
+              className="no-scrollbar w-full resize-none bg-transparent p-4 leading-6 focus:outline-none"
               placeholder="Prismと相談!"
               autoComplete="off"
               spellCheck="false"

apps/extension/src/globals.css

@@ -32,3 +32,23 @@
 .typing-dot:nth-child(3) {
   animation-delay: 0.4s;
 }
+
+/* ChatArea: スクロールバーを非表示にする */
+.chat-scroll {
+  -ms-overflow-style: none; /* IE/Edge */
+  scrollbar-width: none; /* Firefox */
+}
+.chat-scroll::-webkit-scrollbar {
+  display: none; /* Chrome/Safari */
+}
+
+/* 共通: スクロールバー非表示ユーティリティ */
+.no-scrollbar {
+  -ms-overflow-style: none; /* IE/Edge */
+  scrollbar-width: none; /* Firefox */
+}
+.no-scrollbar::-webkit-scrollbar {
+  display: none; /* Chrome/Safari */
+  width: 0;
+  height: 0;
+}