Merge pull request #7641 from sagemathinc/npm-antd-5.18.3

update antd

Author: williamstein

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

@@ -409,7 +409,7 @@ export function OtherSettings(props: Readonly<Props>): JSX.Element {
       <Panel
         header={
           <>
-            <AIAvatar size={22} /> AI Settings
+            <AIAvatar size={18} /> AI Settings
           </>
         }
       >

src/packages/frontend/admin/page.tsx

@@ -89,8 +89,8 @@ export function AdminPage() {
       key: "llm-testing",
       label: (
         <div style={headerStyle}>
-          <AIAvatar size={16} style={{ marginRight: "8px", top: "-5px" }} />{" "}
-          Test LLM Integration
+          <AIAvatar size={16} style={{ marginRight: "8px" }} /> Test LLM
+          Integration
         </div>
       ),
       children: <TestLLMAdmin />,

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

@@ -5,6 +5,7 @@
 
 import type { MenuProps } from "antd";
 import { Button, Dropdown, Space, Tooltip } from "antd";
+import { isEmpty } from "lodash";
 
 import { CSS, redux, useTypedRedux } from "@cocalc/frontend/app-framework";
 import { Icon, Text } from "@cocalc/frontend/components";
@@ -13,16 +14,18 @@ import {
   LLMModelPrice,
   modelToName,
 } from "@cocalc/frontend/frame-editors/llm/llm-selector";
+import { useUserDefinedLLM } from "@cocalc/frontend/frame-editors/llm/use-userdefined-llm";
 import { useProjectContext } from "@cocalc/frontend/project/context";
 import {
-  LanguageModelCore,
   LanguageModel,
+  LanguageModelCore,
   USER_SELECTABLE_LLMS_BY_VENDOR,
+  isCustomOpenAI,
   isLanguageModel,
   isOllamaLLM,
-  toOllamaModel,
-  isCustomOpenAI,
   toCustomOpenAIModel,
+  toOllamaModel,
+  toUserLLMModelName,
 } from "@cocalc/util/db-schema/llm-utils";
 import { COLORS } from "@cocalc/util/theme";
 import { CustomLLMPublic } from "@cocalc/util/types/llm";
@@ -45,6 +48,7 @@ export function RegenerateLLM({
   const selectableLLMs = useTypedRedux("customize", "selectable_llms");
   const ollama = useTypedRedux("customize", "ollama");
   const custom_openai = useTypedRedux("customize", "custom_openai");
+  const user_llm = useUserDefinedLLM();
 
   const haveChatRegenerate = redux
     .getStore("projects")
@@ -117,6 +121,25 @@ export function RegenerateLLM({
     }
   }
 
+  if (!isEmpty(user_llm)) {
+    for (const llm of user_llm) {
+      const m = toUserLLMModelName(llm);
+      const name = modelToName(m);
+      entries.push({
+        key: m,
+        label: (
+          <>
+            <LanguageModelVendorAvatar model={m} /> {name}{" "}
+            <LLMModelPrice model={m} floatRight />
+          </>
+        ),
+        onClick: () => {
+          actions.regenerateLLMResponse(new Date(date), m);
+        },
+      });
+    }
+  }
+
   if (entries.length === 0) {
     entries.push({
       key: "none",
@@ -161,7 +184,6 @@ export function RegenerateLLM({
         <Button
           size="small"
           type="text"
-          icon={<Icon name="refresh" />}
           style={{
             display: "inline",
             whiteSpace: "nowrap",
@@ -170,6 +192,7 @@ export function RegenerateLLM({
           }}
         >
           <Space>
+            <Icon name="refresh" />
             Regenerate
             <Icon name="chevron-down" />
           </Space>

src/packages/frontend/chat/message.tsx

@@ -743,7 +743,7 @@ export default function Message(props: Readonly<Props>) {
               <Avatar
                 account_id={isLLMThread}
                 size={16}
-                style={{ marginLeft: "10px", marginBottom: "2.5px" }}
+                style={{ top: "-5px" }}
               />
             ) : undefined}
           </Button>
@@ -784,11 +784,7 @@ export default function Message(props: Readonly<Props>) {
       const style: CSS =
         mode === "standalone"
           ? {
-              marginTop:
-                props.show_avatar ||
-                (!props.is_prev_sender && is_viewers_message)
-                  ? MARGIN_TOP_VIEWER
-                  : "5px",
+              marginTop: MARGIN_TOP_VIEWER,
               marginLeft: "5px",
               marginRight: "5px",
             }

src/packages/frontend/codemirror/extensions/ai-formula.tsx

@@ -237,7 +237,7 @@ function AiGenFormula({ mode, text = "", project_id, cb }: Props) {
     return (
       <>
         <Title level={4}>
-          <AIAvatar size={24} /> Generate LaTeX Formula
+          <AIAvatar size={20} /> Generate LaTeX Formula
         </Title>
         {enabled ? (
           <>

src/packages/frontend/components/ai-avatar.tsx

@@ -32,7 +32,8 @@ export default function AIAvatar({
         height: size,
         display: "inline-block",
         position: "relative",
-        ...{ marginRight: "3px", ...style },
+        top: "2px",
+        ...style,
       }}
     >
       <div
@@ -41,7 +42,6 @@ export default function AIAvatar({
           backgroundColor,
           color: "white",
           height: size,
-          top: "5px",
           ...innerStyle,
         }}
       >

src/packages/frontend/editors/stopwatch/stopwatch.tsx

@@ -7,23 +7,25 @@
 The stopwatch and timer component
 */
 
-import { CSSProperties, useEffect, useState } from "react";
-import { redux, useForceUpdate } from "@cocalc/frontend/app-framework";
-import { Icon } from "@cocalc/frontend/components/icon";
-import dayjs from "dayjs";
-import { Button, Row, Col, Modal, TimePicker, Tooltip } from "antd";
 import {
   DeleteTwoTone,
+  EditTwoTone,
   PauseCircleTwoTone,
   PlayCircleTwoTone,
   StopTwoTone,
-  EditTwoTone,
 } from "@ant-design/icons";
-import { TimerState } from "./actions";
-import StaticMarkdown from "@cocalc/frontend/editors/slate/static-markdown";
+import { redux, useForceUpdate } from "@cocalc/frontend/app-framework";
+import { Icon } from "@cocalc/frontend/components/icon";
+import { Button, Col, Modal, Row, TimePicker, Tooltip } from "antd";
+import type { Dayjs } from "dayjs";
+import dayjs from "dayjs";
+import { CSSProperties, useEffect, useState } from "react";
+
 import MarkdownInput from "@cocalc/frontend/editors/markdown-input/multimode";
-import { webapp_client } from "@cocalc/frontend/webapp-client";
+import StaticMarkdown from "@cocalc/frontend/editors/slate/static-markdown";
 import { useFrameContext } from "@cocalc/frontend/frame-editors/frame-tree/frame-context";
+import { webapp_client } from "@cocalc/frontend/webapp-client";
+import { TimerState } from "./actions";
 import { TimeAmount } from "./time";
 
 function assertNever(x: never): never {
@@ -114,14 +116,14 @@ export default function Stopwatch(props: StopwatchProps) {
             {!props.compact ? "Edit" : undefined}
           </Button>
         </Tooltip>
-        {editingTime && (
+        {editingTime ? (
           <TimePicker
             open
             defaultValue={getCountdownMoment(props.countdown)}
             onChange={(time) => {
               if (time != null) {
                 setCountdown(
-                  time.second() + time.minute() * 60 + time.hour() * 60 * 60
+                  time.second() + time.minute() * 60 + time.hour() * 60 * 60,
                 );
                 // timeout so the setcountdown can fully propagate through flux; needed for whiteboard
                 setTimeout(() => props.clickButton("reset"), 0);
@@ -134,7 +136,7 @@ export default function Stopwatch(props: StopwatchProps) {
               }
             }}
           />
-        )}
+        ) : undefined}
       </div>
     );
   }
@@ -397,7 +399,7 @@ export default function Stopwatch(props: StopwatchProps) {
   }
 }
 
-export function getCountdownMoment(countdown: number | undefined) {
+export function getCountdownMoment(countdown: number | undefined): Dayjs {
   let amount = Math.round(countdown ?? 0);
   const m = dayjs();
   m.second(amount % 60);

src/packages/frontend/frame-editors/frame-tree/title-bar.tsx

@@ -1057,7 +1057,7 @@ export function FrameTitleBar(props: Props) {
           background: "#fafafa",
         }}
       >
-        <div style={{ margin: "-1px 0 -5px 0" }}>{v}</div>
+        <div style={{ margin: "-1px 0 -1px 0" }}>{v}</div>
       </div>
     );
   }

src/packages/frontend/frame-editors/llm/help-me-fix.tsx

@@ -3,7 +3,7 @@ A generic button for helping a user fix problems using chatgpt.
 If chatgpt is disabled or not available it renders as null.
 */
 
-import { Alert, Button } from "antd";
+import { Alert, Button, Space } from "antd";
 import type { BaseButtonProps } from "antd/lib/button/button";
 import { CSSProperties, useState } from "react";
 import useAsyncEffect from "use-async-effect";
@@ -151,12 +151,10 @@ export default function HelpMeFix({
         }}
       >
         <Button size={size} style={style} disabled={gettingHelp}>
-          <AIAvatar
-            size={16}
-            style={{ marginRight: "5px" }}
-            innerStyle={{ top: "2.5px" }}
-          />
-          Help me fix this...
+          <Space>
+            <AIAvatar size={16} />
+            Help me fix this...
+          </Space>
         </Button>
       </PopconfirmKeyboard>
       {errorGettingHelp && (

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

@@ -410,7 +410,6 @@ export default function LanguageModelTitleBarButton({
             <Text type="secondary">{description}</Text>
           </>
         ),
-        type: preset.tag == tag ? "primary" : undefined,
         onClick: () => {
           setPreset(preset);
           track(TAG_TMPL, { project_id, template: label });
@@ -637,9 +636,9 @@ export default function LanguageModelTitleBarButton({
       >
         <span ref={buttonRef}>
           <AIAvatar
-            size={18}
+            size={16}
             iconColor={COLORS.AI_ASSISTANT_TXT}
-            style={{ top: "-2px", marginRight: "1px" }}
+            innerStyle={{ top: "2px" }}
           />
           {noLabel ? (
             ""