some chat clean up; mainly removing buttons floating in no man's land

Author: williamstein

src/packages/frontend/account/other-settings.tsx

@@ -576,7 +576,7 @@ export function OtherSettings(props: Readonly<Props>): React.JSX.Element {
       <LabeledRow
         label={intl.formatMessage({
           id: "account.other-settings.llm.default_llm",
-          defaultMessage: "Default AI Language Model",
+          defaultMessage: "Default AI Model",
         })}
       >
         <LLMSelector model={model} setModel={setModel} />

src/packages/frontend/chat/actions.ts

@@ -780,9 +780,12 @@ export class ChatActions extends Actions<ChatState> {
     // submit question to the given language model
     const id = uuid();
     this.chatStreams.add(id);
-    setTimeout(() => {
-      this.chatStreams.delete(id);
-    }, 3 * 60 * 1000);
+    setTimeout(
+      () => {
+        this.chatStreams.delete(id);
+      },
+      3 * 60 * 1000,
+    );
 
     // construct the LLM history for the given thread
     const history = reply_to ? this.getLLMHistory(reply_to) : undefined;

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

@@ -218,7 +218,7 @@ export function ChatLog({
     <>
       {visibleHashtags.size > 0 && (
         <HashtagBar
-          style={{ margin: "3px 0" }}
+          style={{ margin: "5px 15px 0 15px" }}
           actions={{
             set_hashtag_state: (tag, state) => {
               actions.setHashtagState(tag, state);

src/packages/frontend/chat/chatroom.tsx

@@ -7,7 +7,7 @@ import { Button, Divider, Input, Select, Space, Tooltip } from "antd";
 import { debounce } from "lodash";
 import { FormattedMessage } from "react-intl";
 
-import { ButtonGroup, Col, Row, Well } from "@cocalc/frontend/antd-bootstrap";
+import { Col, Row, Well } from "@cocalc/frontend/antd-bootstrap";
 import {
   React,
   redux,
@@ -23,13 +23,11 @@ import { hoursToTimeIntervalHuman } from "@cocalc/util/misc";
 import { EditorComponentProps } from "../frame-editors/frame-tree/types";
 import { ChatLog } from "./chat-log";
 import Filter from "./filter";
-import { FoldAllThreads } from "./fold-threads";
 import ChatInput from "./input";
 import { LLMCostEstimationChat } from "./llm-cost-estimation";
 import type { ChatState } from "./store";
 import { SubmitMentionsFn } from "./types";
 import { INPUT_HEIGHT, markChatAsReadIfUnseen } from "./utils";
-import VideoChatButton from "./video/launch-button";
 
 const FILTER_RECENT_NONE = {
   value: 0,
@@ -142,11 +140,6 @@ export function ChatRoom({
     );
   }
 
-  function render_video_chat_button() {
-    if (project_id == null || path == null) return;
-    return <VideoChatButton actions={actions} />;
-  }
-
   function isValidFilterRecentCustom(): boolean {
     const v = parseFloat(filterRecentHCustom);
     return isFinite(v) && v >= 0;
@@ -238,7 +231,7 @@ export function ChatRoom({
       return null;
     }
     return (
-      <Space style={{ width: "100%", marginTop: "3px" }} wrap>
+      <Space style={{ marginTop: "5px", marginLeft: "15px" }} wrap>
         <Filter
           actions={actions}
           search={search}
@@ -251,10 +244,6 @@ export function ChatRoom({
           }}
         />
         {renderFilterRecent()}
-        <ButtonGroup style={{ marginLeft: "5px" }}>
-          {render_video_chat_button()}
-        </ButtonGroup>
-        <FoldAllThreads actions={actions} shortLabel={false} />
       </Space>
     );
   }

src/packages/frontend/chat/fold-threads.tsx

@@ -7,7 +7,7 @@ import { Button, Collapse, Switch } from "antd";
 
 import { useLanguageModelSetting } from "@cocalc/frontend/account/useLanguageModelSetting";
 import { useAsyncEffect, useState } from "@cocalc/frontend/app-framework";
-import { Icon, Paragraph, RawPrompt, Tip } from "@cocalc/frontend/components";
+import { Paragraph, RawPrompt, Tip } from "@cocalc/frontend/components";
 import AIAvatar from "@cocalc/frontend/components/ai-avatar";
 import PopconfirmKeyboard from "@cocalc/frontend/components/popconfirm-keyboard";
 import LLMSelector, {
@@ -56,7 +56,7 @@ export function SummarizeThread({
   return (
     <PopconfirmKeyboard
       onVisibilityChange={setVisible}
-      icon={<AIAvatar size={16} />}
+      icon={<AIAvatar size={16} style={{ marginRight: "15px" }} />}
       title={<>Summarize this thread</>}
       description={() => (
         <div style={{ maxWidth: "500px" }}>
@@ -116,7 +116,8 @@ export function SummarizeThread({
         title={"Summarize this thread using a language model."}
       >
         <Button type="text" style={{ color: COLORS.GRAY_M }}>
-          <Icon name="vertical-align-middle" /> Summarize…
+          <AIAvatar size={16} style={{ top: 0 }} />
+          Summarize…
         </Button>
       </Tip>
     </PopconfirmKeyboard>

src/packages/frontend/chat/llm-msg-summarize.tsx

@@ -236,7 +236,7 @@ export default function Message({
   const [autoFocusEdit, setAutoFocusEdit] = useState<boolean>(false);
 
   const replyMessageRef = useRef<string>("");
-  const replyMentionsRef = useRef<SubmitMentionsFn|undefined>(undefined);
+  const replyMentionsRef = useRef<SubmitMentionsFn | undefined>(undefined);
 
   const is_viewers_message = sender_is_viewer(account_id, message);
   const verb = show_history ? "Hide" : "Show";
@@ -507,7 +507,7 @@ export default function Message({
 
     const feedback = message.getIn(["feedback", account_id]);
     const otherFeedback =
-      isLLMThread && msgWrittenByLLM ? 0 : message.get("feedback")?.size ?? 0;
+      isLLMThread && msgWrittenByLLM ? 0 : (message.get("feedback")?.size ?? 0);
     const showOtherFeedback = otherFeedback > 0;
 
     return (
@@ -942,7 +942,7 @@ export default function Message({
                 )
               }
             >
-              <Icon name="to-top-outlined" /> Fold…
+              <Icon name="vertical-align-middle" /> Fold…
             </Button>
           </Tip>
         )}
@@ -973,7 +973,7 @@ export default function Message({
             type="link"
             block
             style={{ color: "darkblue", textAlign: "center" }}
-            icon={<Icon name="to-top-outlined" rotate="180" />}
+            icon={<Icon name="expand-arrows" />}
           >
             {label}
           </Button>
@@ -1002,13 +1002,7 @@ export default function Message({
               textAlign: "center",
             };
 
-      const iconName = is_folded
-        ? mode === "standalone"
-          ? reverseRowOrdering
-            ? "right-circle-o"
-            : "left-circle-o"
-          : "right-circle-o"
-        : "down-circle-o";
+      const iconName = is_folded ? "expand" : "vertical-align-middle";
 
       const button = (
         <Button

src/packages/frontend/chat/message.tsx

@@ -1,6 +1,5 @@
 import { Button, Flex, Space, Tooltip } from "antd";
 import { useCallback, useEffect, useRef, useState } from "react";
-
 import {
   CSS,
   redux,
@@ -17,12 +16,10 @@ import { COLORS } from "@cocalc/util/theme";
 import type { ChatActions } from "./actions";
 import { ChatLog } from "./chat-log";
 import Filter from "./filter";
-import { FoldAllThreads } from "./fold-threads";
 import ChatInput from "./input";
 import { LLMCostEstimationChat } from "./llm-cost-estimation";
 import { SubmitMentionsFn } from "./types";
 import { INPUT_HEIGHT, markChatAsReadIfUnseen } from "./utils";
-import VideoChatButton from "./video/launch-button";
 
 interface Props {
   project_id: string;
@@ -121,24 +118,6 @@ export default function SideChat({
             borderBottom: "1px solid lightgrey",
           }}
         >
-          <Space.Compact
-            style={{
-              float: "right",
-              marginTop: "-5px",
-            }}
-          >
-            <VideoChatButton actions={actions} />
-            <Tooltip title="Show TimeTravel change history of this side chat.">
-              <Button
-                onClick={() => {
-                  actions.showTimeTravelInNewTab();
-                }}
-              >
-                <Icon name="history" />
-              </Button>
-            </Tooltip>
-            <FoldAllThreads actions={actions} shortLabel={true} />
-          </Space.Compact>
           <CollabList
             addCollab={addCollab}
             project={project}

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

@@ -217,7 +217,7 @@ export function Complete({
       label: (
         <div style={{ ...style, display: "flex", alignItems: "center" }}>
           <AIAvatar size={22} />{" "}
-          <span style={{ marginLeft: "5px" }}>More AI Language Models</span>
+          <span style={{ marginLeft: "5px" }}>More AI Models</span>
         </div>
       ),
       style,