frontend/llm history: search box, dstream, styling

haraldschilly · haraldschilly · commit b98a452beab9 · 2025-08-21T11:39:28.000+02:00
diff --git a/src/CLAUDE.md b/src/CLAUDE.md
@@ -16,7 +16,8 @@ This file provides guidance to Claude Code (claude.ai/code) and also Gemini CLI
 - Run `pretter -w [filename]` after modifying a file (ts, tsx, md, json, ...) to format it correctly.
 - All .js and .ts files are formatted by the tool prettier
 - Add suitable types when you write code
-- Variable name styles are "camelCase" for local and "FOO_BAR" for global variables. If you edit older code not following these guidlines, adjust this rule to fit the files style.
+- Follow DRY principles!
+- Variable name styles are `camelCase` for local and `FOO_BAR` for global variables. React Components and Classes are `FooBar`. If you edit older code not following these guidlines, adjust this rule to fit the files style.
 - Some older code is JavaScript or CoffeeScript, which will be translated to TypeScript
 - Use ES modules (import/export) syntax, not CommonJS (require)
 - Organize the list of imports in such a way: installed npm packages are on top, newline, then are imports from @cocalc's code base. Sorted alphabetically.
@@ -28,7 +29,7 @@ This file provides guidance to Claude Code (claude.ai/code) and also Gemini CLI
 ### Essential Commands
 
 - `pnpm build-dev` - Build all packages for development
-- `pnpm clean` - Clean all node_modules and dist directories
+- `pnpm clean` - Clean all `node_modules` and `dist` directories
 - `pnpm test` - Run full test suite
 - `pnpm depcheck` - Check for dependency issues
 - `prettier -w [filename]` to format the style of a file after editing it
@@ -38,7 +39,6 @@ This file provides guidance to Claude Code (claude.ai/code) and also Gemini CLI
 
 - `cd packages/[package] && pnpm build` - Build and compile a specific package
   - for packages/next and packages/static, run `cd packages/[package] && pnpm build-dev`
-- `cd packages/[package] && pnpm tsc:watch` - TypeScript compilation in watch mode for a specific package
 - `cd packages/[package] && pnpm test` - Run tests for a specific package
 - `cd packages/[package] && pnpm build` - Build a specific package
 - To typecheck the frontend, it is best to run `cd packages/static && pnpm build` - this implicitly compiles the frontend and reports typescript errors
@@ -48,6 +48,7 @@ This file provides guidance to Claude Code (claude.ai/code) and also Gemini CLI
 
 - **IMPORTANT**: Always run `prettier -w [filename]` immediately after editing any .ts, .tsx, .md, or .json file to ensure consistent styling
 - After TypeScript or `*.tsx` changes, run `pnpm build` in the relevant package directory
+  - When editing the frontend, run `pnpm build-dev` in `packages/static`. This implicitly builds the frontend!
 
 ## Architecture Overview
 
diff --git a/src/packages/frontend/codemirror/extensions/ai-formula.tsx b/src/packages/frontend/codemirror/extensions/ai-formula.tsx
@@ -3,18 +3,7 @@
  *  License: MS-RSL – see LICENSE.md for details
  */
 
-import type { MenuProps } from "antd";
-import {
-  Button,
-  Descriptions,
-  Divider,
-  Dropdown,
-  Input,
-  Modal,
-  Select,
-  Space,
-  Tooltip,
-} from "antd";
+import { Button, Descriptions, Divider, Input, Modal, Space } from "antd";
 import { debounce } from "lodash";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -38,10 +27,8 @@ import {
 } from "@cocalc/frontend/components";
 import AIAvatar from "@cocalc/frontend/components/ai-avatar";
 import { LLMModelName } from "@cocalc/frontend/components/llm-name";
-import {
-  MAX_PROMPTS,
-  useLLMHistory,
-} from "@cocalc/frontend/frame-editors/llm/use-llm-history";
+import { useLLMHistory } from "@cocalc/frontend/frame-editors/llm/use-llm-history";
+import { LLMHistorySelector } from "@cocalc/frontend/frame-editors/llm/llm-history-selector";
 import LLMSelector from "@cocalc/frontend/frame-editors/llm/llm-selector";
 import { dialogs, labels } from "@cocalc/frontend/i18n";
 import { show_react_modal } from "@cocalc/frontend/misc";
@@ -367,43 +354,11 @@ function AiGenFormula({ mode, text = "", project_id, locale, cb }: Props) {
             onPressEnter={doGenerate}
             addonBefore={<Icon name="fx" />}
           />
-          {historyPrompts.length > 0 && (
-            <Select
-              style={{ width: 200 }}
-              placeholder="Search history..."
-              showSearch
-              allowClear
-              optionFilterProp="children"
-              filterOption={(input, option) =>
-                (option?.label ?? "")
-                  .toString()
-                  .toLowerCase()
-                  .includes(input.toLowerCase())
-              }
-              onSelect={(value) => setInput(value)}
-              disabled={generating}
-              dropdownStyle={{ maxHeight: 400, overflow: "auto" }}
-              suffixIcon={<Icon name="history" />}
-              options={historyPrompts.slice(0, MAX_PROMPTS).map((prompt, idx) => ({
-                key: idx.toString(),
-                value: prompt,
-                label: (
-                  <Tooltip title={prompt} placement="left">
-                    <div
-                      style={{
-                        maxWidth: "300px",
-                        whiteSpace: "nowrap",
-                        overflow: "hidden",
-                        textOverflow: "ellipsis",
-                      }}
-                    >
-                      {prompt}
-                    </div>
-                  </Tooltip>
-                ),
-              }))}
-            />
-          )}
+          <LLMHistorySelector
+            prompts={historyPrompts}
+            onSelect={setInput}
+            disabled={generating}
+          />
           <Button
             disabled={!input.trim() || generating}
             loading={generating}
@@ -513,7 +468,6 @@ function AiGenFormula({ mode, text = "", project_id, locale, cb }: Props) {
       open
       footer={renderButtons()}
       onCancel={onCancel}
-      centered
       width={{ xs: "90vw", sm: "90vw", md: "80vw", lg: "70vw", xl: "60vw" }}
     >
       {renderBody()}
diff --git a/src/packages/frontend/frame-editors/llm/llm-assistant-button.tsx b/src/packages/frontend/frame-editors/llm/llm-assistant-button.tsx
@@ -19,7 +19,6 @@ import {
   Input,
   Popover,
   Radio,
-  Select,
   Space,
   Tooltip,
 } from "antd";
@@ -57,7 +56,8 @@ import { Actions } from "../code-editor/actions";
 import { AI_ASSIST_TAG } from "./consts";
 import Context from "./context";
 import { Options, createChatMessage } from "./create-chat";
-import { MAX_PROMPTS, useLLMHistory } from "./use-llm-history";
+import { useLLMHistory } from "./use-llm-history";
+import { LLMHistorySelector } from "./llm-history-selector";
 import LLMSelector, { modelToName } from "./llm-selector";
 import TitleBarButtonTour from "./llm-assistant-tour";
 
@@ -670,48 +670,12 @@ export default function LanguageModelTitleBarButton({
               }}
               autoSize={{ minRows: 2, maxRows: 10 }}
             />
-            {historyPrompts.length > 0 && (
-              <Select
-                style={{
-                  width: 200,
-                  alignSelf: "stretch",
-                }}
-                placeholder="Search history..."
-                showSearch
-                allowClear
-                optionFilterProp="children"
-                filterOption={(input, option) =>
-                  (option?.label ?? "")
-                    .toString()
-                    .toLowerCase()
-                    .includes(input.toLowerCase())
-                }
-                onSelect={(value) => setCommand(value)}
-                disabled={querying}
-                dropdownStyle={{ maxHeight: 400, overflow: "auto" }}
-                suffixIcon={<Icon name="history" />}
-                options={historyPrompts
-                  .slice(0, MAX_PROMPTS)
-                  .map((histPrompt, idx) => ({
-                    key: idx.toString(),
-                    value: histPrompt,
-                    label: (
-                      <Tooltip title={histPrompt} placement="left">
-                        <div
-                          style={{
-                            maxWidth: "300px",
-                            whiteSpace: "nowrap",
-                            overflow: "hidden",
-                            textOverflow: "ellipsis",
-                          }}
-                        >
-                          {histPrompt}
-                        </div>
-                      </Tooltip>
-                    ),
-                  }))}
-              />
-            )}
+            <LLMHistorySelector
+              prompts={historyPrompts}
+              onSelect={setCommand}
+              disabled={querying}
+              alignSelf="stretch"
+            />
           </Space.Compact>
         </Paragraph>
         {renderOptions()}
diff --git a/src/packages/frontend/frame-editors/llm/llm-history-selector.tsx b/src/packages/frontend/frame-editors/llm/llm-history-selector.tsx
@@ -0,0 +1,142 @@
+/*
+ *  This file is part of CoCalc: Copyright © 2025 Sagemath, Inc.
+ *  License: MS-RSL – see LICENSE.md for details
+ */
+
+import { CSSProperties, useState } from "react";
+import { Button, Dropdown, Input, Menu, MenuProps, Tooltip } from "antd";
+
+import { Icon } from "@cocalc/frontend/components/icon";
+import { COLORS } from "@cocalc/util/theme";
+
+interface LLMHistorySelectorProps {
+  prompts: string[];
+  onSelect: (value: string) => void;
+  disabled?: boolean;
+  style?: CSSProperties;
+  width?: number;
+  alignSelf?: "stretch" | "flex-start" | "flex-end" | "center" | "baseline";
+}
+
+export function LLMHistorySelector({
+  prompts,
+  onSelect,
+  disabled = false,
+  style,
+  width = 350,
+  alignSelf = "stretch",
+}: LLMHistorySelectorProps) {
+  const [searchText, setSearchText] = useState("");
+  const [isOpen, setIsOpen] = useState(false);
+
+  // Don't render if no prompts
+  if (prompts.length === 0) {
+    return null;
+  }
+
+  const defaultStyle: CSSProperties = {
+    height: "auto",
+    alignSelf,
+    ...style,
+  };
+
+  // Filter prompts based on search text
+  const filteredPrompts = prompts.filter((prompt) =>
+    prompt.toLowerCase().includes(searchText.toLowerCase()),
+  );
+
+  const menuItems: MenuProps["items"] = filteredPrompts.map((prompt, idx) => ({
+    key: idx.toString(),
+    label: (
+      <Tooltip title={prompt} placement="left">
+        <div
+          style={{
+            maxWidth: `${width - 50}px`,
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+          }}
+        >
+          {prompt}
+        </div>
+      </Tooltip>
+    ),
+    onClick: () => {
+      onSelect(prompt);
+      setIsOpen(false);
+      setSearchText("");
+    },
+  }));
+
+  const overlay = (
+    <div
+      style={{
+        backgroundColor: "white",
+        border: `1px solid ${COLORS.GRAY_DDD}`,
+        borderRadius: "6px",
+        boxShadow: "0 6px 16px 0 rgba(0, 0, 0, 0.08)",
+        width,
+        overflowX: "hidden",
+      }}
+    >
+      <div style={{ padding: 8, borderBottom: `1px solid ${COLORS.GRAY_LL}` }}>
+        <Input
+          placeholder="Search history..."
+          allowClear
+          autoFocus
+          value={searchText}
+          onChange={(e) => setSearchText(e.target.value)}
+          style={{ width: "100%" }}
+        />
+      </div>
+      <div
+        style={{
+          maxHeight: width - 50,
+          overflowY: "auto",
+          overflowX: "hidden",
+        }}
+      >
+        {filteredPrompts.length > 0 ? (
+          <Menu
+            items={menuItems}
+            style={{
+              border: "none",
+              boxShadow: "none",
+              maxHeight: "none",
+              overflow: "visible",
+              width: "100%",
+            }}
+          />
+        ) : (
+          <div
+            style={{ padding: 16, textAlign: "center", color: COLORS.FILE_EXT }}
+          >
+            No matching prompts
+          </div>
+        )}
+      </div>
+    </div>
+  );
+
+  return (
+    <Dropdown
+      popupRender={() => overlay}
+      trigger={["click"]}
+      open={isOpen}
+      onOpenChange={(open) => {
+        setIsOpen(open);
+        if (!open) {
+          setSearchText("");
+        }
+      }}
+      disabled={disabled}
+      placement="bottomRight"
+    >
+      <Button
+        style={defaultStyle}
+        icon={<Icon name="history" />}
+        disabled={disabled}
+      />
+    </Dropdown>
+  );
+}
diff --git a/src/packages/frontend/frame-editors/llm/use-llm-history.ts b/src/packages/frontend/frame-editors/llm/use-llm-history.ts
@@ -28,8 +28,9 @@ import { webapp_client } from "@cocalc/frontend/webapp-client";
 import { CONAT_LLM_HISTORY_KEY } from "@cocalc/util/consts";
 import { reuseInFlight } from "@cocalc/util/reuse-in-flight";
 
-// Maximum number of prompts to keep in history per type
-export const MAX_PROMPTS = 100;
+// limit max prompts to keep in history per type
+const MAX_PROMPTS_NUM = 1000;
+const MAX_PROMPTS_BYTES = 1024 * 1024;
 
 export type LLMHistoryType = "general" | "formula";
 
@@ -57,8 +58,8 @@ const getDStream = reuseInFlight(async (type: LLMHistoryType) => {
       name: `${CONAT_LLM_HISTORY_KEY}-${type}`,
       config: {
         discard_policy: "old",
-        max_msgs: MAX_PROMPTS,
-        max_bytes: 1024 * 1024,
+        max_msgs: MAX_PROMPTS_NUM,
+        max_bytes: MAX_PROMPTS_BYTES,
       },
     });
 
@@ -118,11 +119,11 @@ export function useLLMHistory(type: LLMHistoryType = "general") {
 
       // Clean up old prompts if we exceed MAX_PROMPTS
       const currentLength = stream.length;
-      if (currentLength > MAX_PROMPTS) {
+      if (currentLength > MAX_PROMPTS_NUM) {
         // Note: dstream doesn't have a built-in way to remove old entries
         // but we limit the display to MAX_PROMPTS in the UI
         console.warn(
-          `LLM history has ${currentLength} entries, exceeding MAX_PROMPTS=${MAX_PROMPTS}`,
+          `LLM history has ${currentLength} entries, exceeding MAX_PROMPTS=${MAX_PROMPTS_NUM}`,
         );
       }
     } catch (err) {
@@ -147,7 +148,7 @@ export function useLLMHistory(type: LLMHistoryType = "general") {
       // Reload prompts on error
       try {
         const stream = await getDStream(type);
-        const allPrompts = stream.getAll().slice(-MAX_PROMPTS).reverse();
+        const allPrompts = stream.getAll().slice(-MAX_PROMPTS_NUM).reverse();
         setPrompts(allPrompts);
       } catch (reloadErr) {
         console.warn(
diff --git a/src/packages/frontend/jupyter/insert-cell/ai-cell-generator.tsx b/src/packages/frontend/jupyter/insert-cell/ai-cell-generator.tsx
diff --git a/src/packages/frontend/jupyter/llm/cell-tool.tsx b/src/packages/frontend/jupyter/llm/cell-tool.tsx
