frontend/antd: fixing 5.18.3 fallout

haraldschilly · haraldschilly · commit d0147bc2c5b0 · 2024-06-28T12:27:57.000+02:00
diff --git a/src/packages/frontend/account/other-settings.tsx b/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
           </>
         }
       >
diff --git a/src/packages/frontend/admin/page.tsx b/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 />,
diff --git a/src/packages/frontend/chat/message.tsx b/src/packages/frontend/chat/message.tsx
@@ -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",
             }
diff --git a/src/packages/frontend/codemirror/extensions/ai-formula.tsx b/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 ? (
           <>
diff --git a/src/packages/frontend/components/ai-avatar.tsx b/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,
         }}
       >
diff --git a/src/packages/frontend/editors/stopwatch/stopwatch.tsx b/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);
diff --git a/src/packages/frontend/frame-editors/llm/help-me-fix.tsx b/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 && (
diff --git a/src/packages/frontend/frame-editors/llm/title-bar-button.tsx b/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 ? (
             ""
diff --git a/src/packages/frontend/jupyter/insert-cell/index.tsx b/src/packages/frontend/jupyter/insert-cell/index.tsx
@@ -152,13 +152,14 @@ export function InsertCell({
                 title="Create code based on your description (alt+click line)"
                 handleButtonClick={handleButtonClick}
               >
-                <AIAvatar
-                  backgroundColor={"transparent"}
-                  size={12}
-                  style={{ marginRight: "5px" }}
-                  innerStyle={{ color: "default", top: "-2.5px" }}
-                />{" "}
-                Generate...
+                <Space>
+                  <AIAvatar
+                    backgroundColor={"transparent"}
+                    size={14}
+                    innerStyle={{ color: "default", top: "-2px" }}
+                  />
+                  Generate...
+                </Space>
               </TinyButton>
             )}
           </Space>
diff --git a/src/packages/frontend/jupyter/llm/cell-tool.tsx b/src/packages/frontend/jupyter/llm/cell-tool.tsx
@@ -424,7 +424,7 @@ export function LLMCellTool({
             icon={
               <AIAvatar
                 size={14}
-                style={{ position: "relative", top: "-4px", left: "4px" }}
+                style={{ top: "1px" }}
                 iconColor={is_current ? COLORS.AI_ASSISTANT_FONT : undefined}
               />
             }
diff --git a/src/packages/frontend/notifications/notification-nav.tsx b/src/packages/frontend/notifications/notification-nav.tsx
@@ -9,7 +9,7 @@ import { capitalize } from "lodash";
 import React, { useMemo } from "react";
 
 import { redux, useTypedRedux } from "@cocalc/frontend/app-framework";
-import { Icon, IconName, Text } from "@cocalc/frontend/components";
+import { Icon, IconName, MenuItems, Text } from "@cocalc/frontend/components";
 import { COLORS } from "@cocalc/util/theme";
 import { CHANNELS, CHANNELS_ICONS } from "@cocalc/util/types/news";
 import { NotificationFilter } from "./mentions/types";
@@ -42,7 +42,7 @@ const MentionsCounter = () => {
   );
 };
 
-const ITEMS = [
+const ITEMS: MenuItems = [
   {
     key: "mentions",
     label: (
@@ -98,16 +98,14 @@ const ITEMS = [
           </>
         ),
       },
-      ...CHANNELS
-        .filter((c) => c !== "event")
-        .map((c) => ({
-          key: c,
-          label: (
-            <>
-              <Icon name={CHANNELS_ICONS[c] as IconName}/> {capitalize(c)}
-            </>
-          ),
-        })),
+      ...CHANNELS.filter((c) => c !== "event").map((c) => ({
+        key: c,
+        label: (
+          <>
+            <Icon name={CHANNELS_ICONS[c] as IconName} /> {capitalize(c)}
+          </>
+        ),
+      })),
     ],
     type: "group",
   },
diff --git a/src/packages/frontend/package.json b/src/packages/frontend/package.json
@@ -82,7 +82,7 @@
     "csv-stringify": "^6.3.0",
     "d3": "^3.5.6",
     "darkreader": "4.9.35",
-    "dayjs": "^1.11.10",
+    "dayjs": "^1.11.11",
     "debug": "^4.3.4",
     "direction": "^1.0.4",
     "dog-names": "^2.1.0",
diff --git a/src/packages/frontend/project/history/log-entry.tsx b/src/packages/frontend/project/history/log-entry.tsx
@@ -32,7 +32,7 @@ import { describe_quota } from "@cocalc/util/licenses/describe-quota";
 import * as misc from "@cocalc/util/misc";
 import { round1 } from "@cocalc/util/misc";
 import { COLORS } from "@cocalc/util/theme";
-import { Tooltip } from "antd";
+import { Space, Tooltip } from "antd";
 import React from "react";
 import { Col, Grid, Row } from "react-bootstrap";
 import AIAvatar from "../../components/ai-avatar";
@@ -498,10 +498,10 @@ export const LogEntry: React.FC<Props> = React.memo(
       const { usage, model, path } = event;
 
       const name = (
-        <>
-          <AIAvatar size={14} style={{ top: "-4px" }} />
+        <Space size="small">
+          <AIAvatar size={14} style={{ top: "1px" }} />
           {model ? `LLM (${modelToName(model)})` : "LLM"}
-        </>
+        </Space>
       );
 
       const pathLink = (
diff --git a/src/packages/frontend/project/page/home-page/ai-generate-document.tsx b/src/packages/frontend/project/page/home-page/ai-generate-document.tsx
@@ -1035,15 +1035,10 @@ export function AIGenerateDocumentButton({
           style={btnStyle}
           size={mode === "flyout" ? "small" : undefined}
         >
-          <AIAvatar
-            size={mode === "flyout" ? 18 : 14}
-            style={{
-              ...(mode === "flyout"
-                ? {}
-                : { position: "unset", marginRight: "5px" }),
-            }}
-          />
-          {mode === "full" ? ` ${AI_GEN_TEXT}` : ""}
+          <Space>
+            <AIAvatar size={15} />
+            {mode === "full" ? ` ${AI_GEN_TEXT}` : ""}
+          </Space>
         </Button>
       </Tip>
       <AIGenerateDocumentModal
diff --git a/src/packages/frontend/project/start-button.tsx b/src/packages/frontend/project/start-button.tsx
@@ -12,13 +12,13 @@ It's really more than just that button, since it gives info as starting/stopping
 happens, and also when the system is heavily loaded.
 */
 
-import { Alert, Button } from "antd";
+import { Alert, Button, Space } from "antd";
 import { CSSProperties, useRef } from "react";
+
 import { redux, useMemo, useTypedRedux } from "@cocalc/frontend/app-framework";
 import {
   A,
   Delay,
-  Gap,
   Icon,
   ProjectState,
   VisibleMDLG,
@@ -158,6 +158,7 @@ export function StartButton() {
       state == null ||
       (allowed &&
         ["opened", "closed", "archived"].includes(state?.get("state")));
+    const txt = `Start${starting ? "ing" : ""} project`;
     return (
       <div>
         <Button
@@ -173,8 +174,10 @@ export function StartButton() {
             }
           }}
         >
-          {starting ? <Icon name="cocalc-ring" spin /> : <Icon name="play" />}
-          <Gap /> <Gap /> Start{starting ? "ing" : ""} project
+          <Space>
+            {starting ? <Icon name="cocalc-ring" spin /> : <Icon name="play" />}
+            {txt}
+          </Space>
         </Button>
       </div>
     );
diff --git a/src/packages/frontend/purchases/pay-as-you-go/start-project.ts b/src/packages/frontend/purchases/pay-as-you-go/start-project.ts
@@ -2,16 +2,16 @@
 Start project with given pay as you go upgrade.
 */
 
+import { redux } from "@cocalc/frontend/app-framework";
+import track from "@cocalc/frontend/user-tracking";
 import { webapp_client } from "@cocalc/frontend/webapp-client";
+import type { ProjectQuota } from "@cocalc/util/db-schema/purchase-quotas";
+import { getPricePerHour } from "@cocalc/util/purchases/project-quotas";
 import {
   getPayAsYouGoPricesProjectQuotas,
   isPurchaseAllowed,
   setPayAsYouGoProjectQuotas,
 } from "../api";
-import { getPricePerHour } from "@cocalc/util/purchases/project-quotas";
-import type { ProjectQuota } from "@cocalc/util/db-schema/purchase-quotas";
-import track from "@cocalc/frontend/user-tracking";
-import { redux } from "@cocalc/frontend/app-framework";
 
 // when checking user has sufficient credits to run project with
 // upgrade, require that they have enough for this many hours.
@@ -36,7 +36,7 @@ export default async function startProject({
   setStatus?.("Checking balance and limits...");
   const { allowed, reason } = await isPurchaseAllowed(
     "project-upgrade",
-    cost * MIN_HOURS
+    cost * MIN_HOURS,
   );
   if (!allowed) {
     setStatus?.("Increasing balance or limits ...");
@@ -52,7 +52,7 @@ export default async function startProject({
       setStatus?.("Checking balance and limits...");
       const { allowed, reason } = await isPurchaseAllowed(
         "project-upgrade",
-        cost * MIN_HOURS
+        cost * MIN_HOURS,
       );
       if (!allowed) {
         throw Error(reason);
diff --git a/src/packages/pnpm-lock.yaml b/src/packages/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -409,7 +409,7 @@ export function OtherSettings(props: Readonly<Props>): JSX.Element {`
`409`	`409`	`<Panel`
`410`	`410`	`header={`
`411`	`411`	`<>`
`412`		`- <AIAvatar size={22} /> AI Settings`
	`412`	`+ <AIAvatar size={18} /> AI Settings`
`413`	`413`	`</>`
`414`	`414`	`}`
`415`	`415`	`>`
Original file line number	Diff line number	Diff line change
`@@ -424,7 +424,7 @@ export function LLMCellTool({`
`424`	`424`	`icon={`
`425`	`425`	`<AIAvatar`
`426`	`426`	`size={14}`
`427`		`- style={{ position: "relative", top: "-4px", left: "4px" }}`
	`427`	`+ style={{ top: "1px" }}`
`428`	`428`	`iconColor={is_current ? COLORS.AI_ASSISTANT_FONT : undefined}`
`429`	`429`	`/>`
`430`	`430`	`}`