ai should use main chat, not side chat; also misc improvements

Author: williamstein

src/packages/frontend/chat/actions.ts

@@ -486,8 +486,17 @@ export class ChatActions extends Actions<ChatState> {
   scrollToBottom = (index: number = -1) => {
     if (this.syncdb == null) return;
     // this triggers scroll behavior in the chat-log component.
-    this.setState({ scrollToBottom: null }); // no-op, but necessary to trigger a change
-    this.setState({ scrollToBottom: index });
+    // no-op, but necessary to trigger a change
+    this.frameTreeActions.set_frame_data({
+      id: this.frameId,
+      scrollToBottom: null,
+    });
+    setTimeout(() => {
+      this.frameTreeActions.set_frame_data({
+        id: this.frameId,
+        scrollToBottom: index,
+      });
+    }, 1);
   };
 
   set_uploading = (is_uploading: boolean): void => {
@@ -796,13 +805,13 @@ export class ChatActions extends Actions<ChatState> {
       }
     }
 
-    // FIXME: these scrollToBottoms are a good idea, but they need an index number – not the date/timestamp
-    // this.scrollToBottom(reply_to?.valueOf());
     let content: string = "";
     let halted = false;
 
     chatStream.on("token", (token) => {
-      if (halted || this.syncdb == null) return;
+      if (halted || this.syncdb == null) {
+        return;
+      }
 
       // we check if user clicked on the "stop generating" button
       const cur = this.syncdb.get_one({ event: "chat", date });
@@ -834,7 +843,6 @@ export class ChatActions extends Actions<ChatState> {
       if (token == null) {
         this.chatStreams.delete(id);
         this.syncdb.commit();
-        // this.scrollToBottom(reply_to?.valueOf());
       }
     });
 
@@ -864,7 +872,6 @@ export class ChatActions extends Actions<ChatState> {
       };
       this.syncdb.set(msg);
       this.syncdb.commit();
-      // this.scrollToBottom(reply_to?.valueOf());
     });
   };
 

src/packages/frontend/chat/chat-log.tsx

@@ -43,6 +43,7 @@ interface Props {
   filterRecentH?;
   selectedHashtags;
   disableFilters?: boolean;
+  scrollToBottom?: null | number | undefined;
 }
 
 export function ChatLog({
@@ -57,9 +58,9 @@ export function ChatLog({
   filterRecentH,
   selectedHashtags: selectedHashtags0,
   disableFilters,
+  scrollToBottom,
 }: Props) {
   const messages = useRedux(["messages"], project_id, path) as ChatMessages;
-  const scrollToBottom = useRedux(["scrollToBottom"], project_id, path);
   const llm_cost_reply: [number, number] = useRedux(
     ["llm_cost_reply"],
     project_id,

src/packages/frontend/chat/chatroom.tsx

@@ -90,6 +90,7 @@ export function ChatRoom({
   const search = desc.get("data-search") ?? "";
   const filterRecentH: number = desc.get("data-filterRecentH") ?? 0;
   const selectedHashtags = desc.get("data-selectedHashtags");
+  const scrollToBottom = desc.get("data-scrollToBottom") ?? null;
 
   const messages = useEditor("messages");
   const [filterRecentHCustom, setFilterRecentHCustom] = useState<string>("");
@@ -331,6 +332,7 @@ export function ChatRoom({
             search={search}
             filterRecentH={filterRecentH}
             selectedHashtags={selectedHashtags}
+            scrollToBottom={scrollToBottom}
           />
           {render_preview_message()}
         </div>

src/packages/frontend/chat/get-actions.ts

@@ -14,7 +14,7 @@ export default async function getChatActions(
   width: number = 0.7
 ): Promise<ChatActions> {
   const projectActions = redux.getProjectActions(project_id);
-  projectActions.open_chat({ path: path, width });
+  projectActions.open_chat({ path, width });
   const start = Date.now();
 
   while (Date.now() - start <= 1000 * maxWaitSeconds) {

src/packages/frontend/chat/side-chat.tsx

@@ -48,6 +48,7 @@ export default function SideChat({
   const input: string = useRedux(["input"], project_id, path);
   const search = desc?.get("data-search") ?? "";
   const selectedHashtags = desc?.get("data-selectedHashtags");
+  const scrollToBottom = desc.get("data-scrollToBottom") ?? null;
   const addCollab: boolean = useRedux(["add_collab"], project_id, path);
   const is_uploading = useRedux(["is_uploading"], project_id, path);
   const project_map = useTypedRedux("projects", "project_map");
@@ -188,6 +189,7 @@ export default function SideChat({
           search={search}
           selectedHashtags={selectedHashtags}
           disableFilters={disableFilters}
+          scrollToBottom={scrollToBottom}
         />
       </div>
 

src/packages/frontend/editors/markdown-input/component.tsx

@@ -48,11 +48,13 @@ import "@cocalc/frontend/codemirror/init";
 
 export const BLURED_STYLE: CSSProperties = {
   border: "1px solid rgb(204,204,204)", // focused will be rgb(112, 178, 230);
+  borderRadius: "5px",
 } as const;
 
 export const FOCUSED_STYLE: CSSProperties = {
   outline: "none !important",
   boxShadow: "0px 0px 5px  #719ECE",
+  borderRadius: "5px",
   border: "1px solid #719ECE",
 } as const;
 

src/packages/frontend/frame-editors/chat-editor/actions.ts

@@ -22,6 +22,8 @@ import { handleSyncDBChange, initFromSyncDB } from "@cocalc/frontend/chat/sync";
 import { redux_name } from "@cocalc/frontend/app-framework";
 import { aux_file } from "@cocalc/util/misc";
 
+const FRAME_TYPE = "chatroom";
+
 type ChatEditorState = CodeEditorState & ChatState;
 
 export class Actions extends CodeEditorActions<ChatEditorState> {
@@ -59,6 +61,12 @@ export class Actions extends CodeEditorActions<ChatEditorState> {
     if (this.chatActions[frameId] != null) {
       return this.chatActions[frameId];
     }
+
+    if (this._get_frame_type(frameId) != FRAME_TYPE) {
+      // if frame is not of type FRAME_TYPE, no chat actions are defined
+      return;
+    }
+
     const syncdb = this._syncstring;
     const auxPath = this.auxPath + frameId;
     const reduxName = redux_name(this.project_id, auxPath);
@@ -111,7 +119,7 @@ export class Actions extends CodeEditorActions<ChatEditorState> {
   }
 
   _raw_default_frame_tree(): FrameTree {
-    return { type: "chatroom" };
+    return { type: FRAME_TYPE };
   }
 
   async export_to_markdown(): Promise<void> {

src/packages/frontend/frame-editors/llm/create-chat.ts

@@ -5,6 +5,8 @@ import { capitalize } from "@cocalc/util/misc";
 import { Actions, CodeEditorState } from "../code-editor/actions";
 import { AI_ASSIST_TAG } from "./consts";
 import { modelToMention } from "./llm-selector";
+import type { ChatActions } from "@cocalc/frontend/chat/actions";
+import type { Actions as ChatEditorActions } from "@cocalc/frontend/frame-editors/chat-editor/actions";
 
 export interface Options {
   codegen?: boolean;
@@ -29,11 +31,27 @@ export default async function createChat({
 
   const { message } = await createChatMessage(actions, frameId, options, input);
 
-  const chatActions = await getChatActions(
-    actions.redux,
-    actions.project_id,
-    actions.path,
-  );
+  let chatActions: ChatActions | undefined;
+  if (actions.path.endsWith(".sage-chat")) {
+    // a full chatroom (not a different doc type)
+    chatActions = (actions as ChatEditorActions).getChatActions(frameId);
+    if (chatActions == null) {
+      const id = actions.show_focused_frame_of_type("chatroom");
+      chatActions = (actions as ChatEditorActions).getChatActions(id);
+      if (chatActions == null) {
+        console.warn("Bug getting chatroom");
+        // this should be impossible -- fallback to side chat.
+      }
+    }
+  }
+  if (chatActions == null) {
+    // get side chat-specific actions
+    chatActions = await getChatActions(
+      actions.redux,
+      actions.project_id,
+      actions.path,
+    );
+  }
 
   await chatActions.sendChat({
     input: message,
@@ -43,7 +61,9 @@ export default async function createChat({
 
   chatActions.scrollToBottom();
   // scroll to bottom again *after* the message starts getting responded to.
+  // Don't scroll too much though, since user wants to actual stop and READ.
   setTimeout(() => chatActions.scrollToBottom(), 1000);
+  setTimeout(() => chatActions.scrollToBottom(), 3000);
 }
 
 export async function createChatMessage(

src/packages/frontend/frame-editors/llm/title-bar-button.tsx

@@ -173,6 +173,7 @@ export default function LanguageModelTitleBarButton({
   setShowDialog,
   noLabel,
 }: Props) {
+  const noContext = path?.endsWith(".sage-chat");
   const intl = useIntl();
   const is_cocalc_com = useTypedRedux("customize", "is_cocalc_com");
   const [error, setError] = useState<string>("");
@@ -231,12 +232,17 @@ export default function LanguageModelTitleBarButton({
     if (showDialog) {
       setScope(getScope(id, actions));
       restoreCommand();
-      inputRef.current?.focus();
+      setTimeout(() => inputRef.current?.focus(), 10);
     }
   }, [showDialog]);
 
   useEffect(() => {
-    if (showDialog && scope && actions != null) {
+    if (
+      showDialog &&
+      scope &&
+      actions != null &&
+      !noContext
+    ) {
       const c = actions.languageModelGetContext(id, scope);
       setContext(c);
     }
@@ -296,8 +302,8 @@ export default function LanguageModelTitleBarButton({
         }`,
       );
     },
-    1000,
-    { leading: false, trailing: true },
+    500,
+    { leading: true, trailing: true },
   );
 
   useAsyncEffect(doUpdateMessage, [
@@ -446,7 +452,7 @@ export default function LanguageModelTitleBarButton({
   }
 
   function renderShowOptions() {
-    if (!showOptions || path.endsWith(".sage-chat")) {
+    if (!showOptions || noContext) {
       return;
     }
 
@@ -580,7 +586,7 @@ export default function LanguageModelTitleBarButton({
 
   function renderContent() {
     return (
-      <Space direction="vertical" style={{ width: "800px", maxWidth: "90vw" }}>
+      <Space direction="vertical" style={{ width: "800px", maxWidth: "50vw" }}>
         <Paragraph>
           Describe what you want the language model{" "}
           <LLMNameLink model={model} /> to do. Be specific!