Autoscroll ChatHistory when streaming in responses.

src/ChatView.tsx

@@ -33,7 +33,7 @@ export class ChatView extends ItemView {
   }
 
   getDisplayText(): string {
-    return "Co-Intelligence Chat";
+    return this.file?.path || "Co-Intelligence Chat";
   }
 
   async handleChatChange(
@@ -66,7 +66,10 @@ export class ChatView extends ItemView {
       this.leaf.detach();
       return;
     }
-    const { messages, linkedNotes } = await deserializeCoiNote(this.file, this.app);
+    const { messages, linkedNotes } = await deserializeCoiNote(
+      this.file,
+      this.app,
+    );
     const rootElement = this.containerEl.children[1];
     render(
       () => (
@@ -74,7 +77,9 @@ export class ChatView extends ItemView {
           app={this.app}
           plugin={this.plugin}
           file={this.file as TFile}
-          onChange={(newMessages, newTitle) => this.handleChatChange(newMessages, newTitle, linkedNotes)}
+          onChange={(newMessages, newTitle) =>
+            this.handleChatChange(newMessages, newTitle, linkedNotes)
+          }
           initialMessages={messages}
           initialLinkedNotes={linkedNotes}
         />

src/components/ChatHistory.tsx

@@ -1,4 +1,4 @@
-import { Component, Accessor } from "solid-js";
+import { Component, Accessor, createEffect, onMount } from "solid-js";
 import { CoreMessage } from "ai";
 
 import { BotMessage } from "@/components/BotMessage";
@@ -9,8 +9,27 @@ export interface ChatHistoryProps {
 }
 
 export const ChatHistory: Component<ChatHistoryProps> = ({ messages }) => {
+  let chatContainerRef: HTMLDivElement | undefined;
+  
+  const scrollToBottom = () => {
+    if (chatContainerRef) {
+      chatContainerRef.scrollTop = chatContainerRef.scrollHeight;
+    }
+  };
+
+  // Scroll to bottom whenever messages change
+  createEffect(() => {
+    // Access messages to create dependency
+    messages();
+    // Use setTimeout to ensure DOM has updated before scrolling
+    setTimeout(scrollToBottom, 0);
+  });
+
+  // Initial scroll on mount
+  onMount(scrollToBottom);
+
   return (
-    <div class="coi-chat-history">
+    <div class="coi-chat-history" ref={chatContainerRef}>
       {messages().map((message) => {
         if (message.role === "assistant") {
           return <BotMessage message={message} />;