@docyrus/ui-pro-ai-assistant 0.0.1

package/src/internal/plate-editor/plate-ui/ai-menu.tsx

@@ -0,0 +1,828 @@
+'use client';
+
+import {
+  useCallback, useEffect, useLayoutEffect, useMemo, useState, type ComponentType, type ReactNode
+} from 'react';
+
+import {
+  AIChatPlugin,
+  AIPlugin,
+  useEditorChat,
+  useLastAssistantMessage
+} from '@platejs/ai/react';
+import { BlockSelectionPlugin, useIsSelecting } from '@platejs/selection/react';
+import { getTransientSuggestionKey } from '@platejs/suggestion';
+import {
+  AlbumIcon,
+  ArrowUpIcon,
+  BadgeHelpIcon,
+  CheckIcon,
+  CornerUpLeftIcon,
+  FeatherIcon,
+  LanguagesIcon,
+  ListEnd,
+  ListMinusIcon,
+  ListPlusIcon,
+  PenLineIcon,
+  Wand,
+  X
+} from 'lucide-react';
+import {
+  isHotkey, KEYS, NodeApi, RangeApi, type NodeEntry
+} from 'platejs';
+import {
+  type PlateEditor,
+  useEditorPlugin,
+  useEditorRef,
+  useHotkeys,
+  usePluginOption
+} from 'platejs/react';
+
+import { cn } from '@docyrus/ui-pro-shared/lib/utils';
+
+import { AIChatEditor } from './ai-chat-editor';
+import { Button } from './button';
+import {
+  type Action,
+  ComboboxContent,
+  ComboboxInput,
+  ComboboxList,
+  filterMenuGroups,
+  filterMenuItems,
+  Menu,
+  MenuContent,
+  MenuGroup,
+  MenuItem,
+  MenuTrigger,
+  useComboboxValueState,
+  useMenuStore
+} from './menu';
+import { TextareaAutosize } from './textarea';
+
+/**
+ * Returns the selected text when using a text selection (not block selection).
+ * Returns null if block selection is active, selection is collapsed, or no editor selection.
+ */
+function getSelectedText(editor: PlateEditor): string | null {
+  // Block selection active — this is not a text selection
+  const blockSelectedNodes = editor
+    .getApi(BlockSelectionPlugin)
+    .blockSelection.getNodes();
+
+  if (blockSelectedNodes.length > 0) return null;
+
+  const { selection } = editor;
+
+  if (!selection || RangeApi.isCollapsed(selection)) return null;
+
+  try {
+    return editor.api.string(selection) || null;
+  } catch {
+    return null;
+  }
+}
+
+export function AIMenu() {
+  const { api, editor } = useEditorPlugin(AIChatPlugin);
+  const open = usePluginOption(AIChatPlugin, 'open');
+  const mode = usePluginOption(AIChatPlugin, 'mode');
+  const isSelecting = useIsSelecting();
+  const streaming = usePluginOption(AIChatPlugin, 'streaming');
+
+  const [input, setInput] = useState('');
+  const toolName = usePluginOption(AIChatPlugin, 'toolName');
+  const chat = usePluginOption(AIChatPlugin, 'chat');
+
+  const { messages, status } = chat;
+
+  /*
+   * Determine toolName for free-form custom input.
+   * Our backend does not emit `data-toolName` events like the reference OpenAI
+   * implementation, so toolName would stay null and nothing would render.
+   * We pick the tool based on selection state — the same heuristic the reference
+   * project's AI would choose in the vast majority of cases.
+   */
+  const handleSubmit = useCallback(
+    (inputText: string) => {
+      if (!inputText.trim()) return;
+
+      // Follow-up messages: keep the existing toolName Plate.js already set.
+      if (messages.length > 0) {
+        void api.aiChat.submit(inputText);
+      } else if (isSelecting) {
+        // Text / block is selected → user wants to edit it.
+        void api.aiChat.submit(inputText, { toolName: 'edit' });
+      } else {
+        // Cursor only → user wants to generate / insert new content.
+        void api.aiChat.submit(inputText, {
+          mode: 'insert',
+          toolName: 'generate'
+        });
+      }
+
+      setInput('');
+    },
+    [api, isSelecting, messages.length]
+  );
+
+  const isLoading = status === 'streaming' || status === 'submitted';
+
+  const content = useLastAssistantMessage()?.parts.find(
+    part => part.type === 'text'
+  )?.text;
+
+  const { show, store } = useMenuStore();
+
+  useEffect(() => {
+    if (streaming) {
+      const anchor = api.aiChat.node({ anchor: true });
+
+      setTimeout(() => {
+        const anchorDom = editor.api.toDOMNode(anchor![0])!;
+
+        store.setAnchorElement(anchorDom);
+      }, 0);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [streaming]);
+
+  useEditorChat({
+    chat,
+    onOpenBlockSelection: (blocks: NodeEntry[]) => {
+      show(editor.api.toDOMNode(blocks.at(-1)![0])!);
+    },
+    onOpenChange: (open) => {
+      if (!open) {
+        // Don't close when window loses focus (tab switch, alt-tab)
+        if (document.hidden) return;
+
+        store.hideAll();
+        setInput('');
+      }
+    },
+    onOpenCursor: () => {
+      const [ancestor] = editor.api.block({ highest: true })!;
+
+      if (!editor.api.isAt({ end: true }) && !editor.api.isEmpty(ancestor)) {
+        editor
+          .getApi(BlockSelectionPlugin)
+          .blockSelection.set(ancestor.id as string);
+      }
+
+      show(editor.api.toDOMNode(ancestor)!);
+    },
+    onOpenSelection: () => {
+      show(editor.api.toDOMNode(editor.api.blocks().at(-1)![0])!);
+    }
+  });
+
+  useHotkeys('escape', () => {
+    if (isLoading) {
+      api.aiChat.stop();
+    } else {
+      api.aiChat.hide();
+    }
+  });
+
+  useLayoutEffect(() => {
+    if (toolName === 'edit' && mode === 'chat' && status === 'ready') {
+      let anchorNode = editor.api.node({
+        at: [],
+        reverse: true,
+        match: n => !!n[KEYS.suggestion] && !!n[getTransientSuggestionKey()]
+      });
+
+      if (!anchorNode) {
+        anchorNode = editor
+          .getApi(BlockSelectionPlugin)
+          .blockSelection.getNodes({ selectionFallback: true, sort: true })
+          .at(-1);
+      }
+      if (!anchorNode) return;
+
+      // BUG
+      setTimeout(() => {
+        const block = editor.api.block({ at: anchorNode[1] });
+        const domNode = editor.api.toDOMNode(block![0]!)!;
+
+        store.setAnchorElement(domNode);
+      }, 0);
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [status]);
+
+  useEffect(() => {
+    if (status === 'ready') {
+      setInput('');
+    }
+  }, [status]);
+
+  if (toolName === 'comment' && status === 'ready') return null;
+
+  return (
+    <Menu open={open} placement="bottom-start" store={store}>
+      <MenuContent
+        flip={false}
+        onClickOutside={() => {
+          api.aiChat.hide();
+        }}
+        variant="ai"
+        wrapperProps={{
+          /*
+           * FIXME: It is best to set it to 100.
+           * But it will cause a horizontal scrollbar to appear.
+           * A method should be found to disable translate-x.
+           */
+          className: 'w-[98%]!'
+        }}>
+        <ComboboxContent variant="ai">
+          {mode === 'chat'
+            && isSelecting
+            && content
+            && toolName === 'generate' && <AIChatEditor content={content} />}
+
+          <div className="flex gap-1.5 px-3 text-sm">
+            {isLoading ? (
+              <div className="flex grow select-none items-center gap-2 py-2 text-muted-foreground">
+                {messages.length > 1 ? 'Editing' : 'Thinking'}
+
+                <LoadingIcon />
+              </div>
+            ) : (
+              <AIMenuCombobox
+                input={input}
+                onSubmit={handleSubmit}
+                setInput={setInput} />
+            )}
+
+            <Button
+              className="no-focus-ring mt-1 shrink-0"
+              disabled={!isLoading && input.trim().length === 0}
+              onClick={() => {
+                if (isLoading) {
+                  api.aiChat.stop();
+                } else {
+                  handleSubmit(input);
+                }
+              }}
+              size="iconSm"
+              variant="ghost">
+              {isLoading ? <StopIcon /> : <SubmitIcon />}
+            </Button>
+          </div>
+        </ComboboxContent>
+
+        {!isLoading && (
+          <ComboboxList
+            className={cn('[&_.menu-item-icon]:text-purple-700')}
+            variant="ai">
+            <AIMenuItems input={input} setInput={setInput} store={store} />
+          </ComboboxList>
+        )}
+      </MenuContent>
+    </Menu>
+  );
+}
+
+type EditorChatState
+  = | 'cursorCommand'
+    | 'cursorSuggestion'
+    | 'selectionCommand'
+    | 'selectionSuggestion';
+
+const GROUP = {
+  LANGUAGES: 'group_languages',
+  SELECTION_LANGUAGES: 'group_selection_languages'
+} as const;
+
+const aiChatItems = {
+  accept: {
+    icon: <CheckIcon />,
+    label: 'Accept',
+    value: 'accept',
+    onSelect: ({ aiEditor, editor }) => {
+      const { mode, toolName } = editor.getOptions(AIChatPlugin);
+
+      if (mode === 'chat' && toolName === 'generate') {
+        return editor
+          .getTransforms(AIChatPlugin)
+          .aiChat.replaceSelection(aiEditor);
+      }
+
+      editor.getTransforms(AIChatPlugin).aiChat.accept();
+      setTimeout(() => {
+        editor.tf.focus({ edge: 'end' });
+      }, 0);
+    }
+  },
+  continueWrite: {
+    icon: <PenLineIcon />,
+    label: 'Continue writing',
+    value: 'continueWrite',
+    onSelect: ({ editor, input }) => {
+      const ancestorNode = editor.api.block({ highest: true });
+
+      if (!ancestorNode) return;
+
+      const isEmpty = NodeApi.string(ancestorNode[0]).trim().length === 0;
+
+      void editor.getApi(AIChatPlugin).aiChat.submit(input, {
+        mode: 'insert',
+        prompt: isEmpty ? `<Document>
+{editor}
+</Document>
+Start writing a new paragraph AFTER <Document> ONLY ONE SENTENCE` : 'Continue writing AFTER <Block> ONLY ONE SENTENCE. DONT REPEAT THE TEXT.',
+        toolName: 'generate'
+      });
+    }
+  },
+  discard: {
+    icon: <X />,
+    label: 'Discard',
+    shortcut: 'Escape',
+    value: 'discard',
+    onSelect: ({ editor }) => {
+      editor.getTransforms(AIPlugin).ai.undo();
+      editor.getApi(AIChatPlugin).aiChat.hide();
+    }
+  },
+  explain: {
+    icon: <BadgeHelpIcon />,
+    label: 'Explain',
+    value: 'explain',
+    onSelect: ({ editor, input }) => {
+      void editor.getApi(AIChatPlugin).aiChat.submit(input, {
+        prompt: {
+          default: 'Explain {editor}',
+          selecting: 'Explain'
+        },
+        toolName: 'generate'
+      });
+    }
+  },
+  fixSpelling: {
+    icon: <CheckIcon />,
+    label: 'Fix spelling & grammar',
+    value: 'fixSpelling',
+    onSelect: ({ editor, input }) => {
+      const selectedText = getSelectedText(editor);
+
+      void editor.getApi(AIChatPlugin).aiChat.submit(input, {
+        prompt: selectedText ? `Fix spelling, grammar, and punctuation errors only in this selected text: "${selectedText}". Do not modify any other part of the content.` : 'Fix spelling, grammar, and punctuation errors within each block only, without changing meaning, tone, or adding new information.',
+        toolName: 'edit'
+      });
+    }
+  },
+  [GROUP.LANGUAGES]: {
+    component: TranslateMenuItems,
+    filterItems: true,
+    icon: <LanguagesIcon className="text-green-800" />,
+    items: [
+      { label: 'English', value: 'translate_english' },
+      { label: 'Korean', value: 'translate_korean' },
+      {
+        label: 'Chinese, Simplified',
+        value: 'translate_chinese_simplified'
+      },
+      {
+        label: 'Chinese, Traditional',
+        value: 'translate_chinese_traditional'
+      },
+      { label: 'Japanese', value: 'translate_japanese' },
+      { label: 'Spanish', value: 'translate_spanish' },
+      { label: 'Russian', value: 'translate_russian' },
+      { label: 'French', value: 'translate_french' },
+      { label: 'Portuguese', value: 'translate_portuguese' },
+      { label: 'German', value: 'translate_german' },
+      { label: 'Italian', value: 'translate_italian' },
+      { label: 'Dutch', value: 'translate_dutch' },
+      { label: 'Indonesian', value: 'translate_indonesian' },
+      { label: 'Filipino', value: 'translate_filipino' },
+      { label: 'Vietnamese', value: 'translate_vietnamese' },
+      { label: 'Turkish', value: 'translate_turkish' },
+      { label: 'Arabic', value: 'translate_arabic' }
+    ],
+    label: 'Languages',
+    value: GROUP.LANGUAGES
+  },
+  [GROUP.SELECTION_LANGUAGES]: {
+    component: TranslateMenuItems,
+    filterItems: true,
+    icon: <LanguagesIcon className="text-green-800" />,
+    items: [
+      { label: 'English', value: 'translate_english' },
+      { label: 'Korean', value: 'translate_korean' },
+      {
+        label: 'Chinese, Simplified',
+        value: 'translate_chinese_simplified'
+      },
+      {
+        label: 'Chinese, Traditional',
+        value: 'translate_chinese_traditional'
+      },
+      { label: 'Japanese', value: 'translate_japanese' },
+      { label: 'Spanish', value: 'translate_spanish' },
+      { label: 'Russian', value: 'translate_russian' },
+      { label: 'French', value: 'translate_french' },
+      { label: 'Portuguese', value: 'translate_portuguese' },
+      { label: 'German', value: 'translate_german' },
+      { label: 'Italian', value: 'translate_italian' },
+      { label: 'Dutch', value: 'translate_dutch' },
+      { label: 'Indonesian', value: 'translate_indonesian' },
+      { label: 'Filipino', value: 'translate_filipino' },
+      { label: 'Vietnamese', value: 'translate_vietnamese' },
+      { label: 'Turkish', value: 'translate_turkish' },
+      { label: 'Arabic', value: 'translate_arabic' }
+    ],
+    label: 'Languages',
+    value: GROUP.LANGUAGES
+  },
+  improveWriting: {
+    icon: <Wand />,
+    label: 'Improve writing',
+    value: 'improveWriting',
+    onSelect: ({ editor, input }) => {
+      const selectedText = getSelectedText(editor);
+
+      void editor.getApi(AIChatPlugin).aiChat.submit(input, {
+        prompt: selectedText ? `Improve the writing of this selected text only: "${selectedText}". Do not modify any other part of the content.` : 'Improve the writing for clarity and flow, without changing meaning or adding new information.',
+        toolName: 'edit'
+      });
+    }
+  },
+  insertBelow: {
+    icon: <ListEnd />,
+    label: 'Insert below',
+    value: 'insertBelow',
+    onSelect: ({ aiEditor, editor }) => {
+      const { selectedIds } = editor.getOptions(BlockSelectionPlugin);
+
+      if (!selectedIds || selectedIds.size === 0) {
+        const { chatNodes } = editor.getOptions(AIChatPlugin);
+
+        if (chatNodes && chatNodes.length > 0) {
+          const ids = chatNodes
+            .map(n => n.id)
+            .filter((id): id is string => typeof id === 'string');
+
+          if (ids.length > 0) {
+            editor.setOption(BlockSelectionPlugin, 'selectedIds', new Set(ids));
+          }
+        }
+      }
+
+      void editor
+        .getTransforms(AIChatPlugin)
+        .aiChat.insertBelow(aiEditor, { format: 'none' });
+    }
+  },
+  makeLonger: {
+    icon: <ListPlusIcon />,
+    label: 'Make longer',
+    value: 'makeLonger',
+    onSelect: ({ editor, input }) => {
+      const selectedText = getSelectedText(editor);
+
+      void editor.getApi(AIChatPlugin).aiChat.submit(input, {
+        prompt: selectedText ? `Make this selected text longer by elaborating on existing ideas: "${selectedText}". Do not modify any other part of the content.` : 'Make the content longer by elaborating on existing ideas within each block only, without changing meaning or adding new information.',
+        toolName: 'edit'
+      });
+    }
+  },
+  makeShorter: {
+    icon: <ListMinusIcon />,
+    label: 'Make shorter',
+    value: 'makeShorter',
+    onSelect: ({ editor, input }) => {
+      const selectedText = getSelectedText(editor);
+
+      void editor.getApi(AIChatPlugin).aiChat.submit(input, {
+        prompt: selectedText ? `Make this selected text shorter by reducing verbosity: "${selectedText}". Do not modify any other part of the content.` : 'Make the content shorter by reducing verbosity within each block only, without changing meaning or removing essential information.',
+        toolName: 'edit'
+      });
+    }
+  },
+  simplifyLanguage: {
+    icon: <FeatherIcon />,
+    label: 'Simplify language',
+    value: 'simplifyLanguage',
+    onSelect: ({ editor, input }) => {
+      const selectedText = getSelectedText(editor);
+
+      void editor.getApi(AIChatPlugin).aiChat.submit(input, {
+        prompt: selectedText ? `Simplify the language of this selected text only: "${selectedText}". Do not modify any other part of the content.` : 'Simplify the language by using clearer and more straightforward wording within each block only, without changing meaning or adding new information.',
+        toolName: 'edit'
+      });
+    }
+  },
+  summarize: {
+    icon: <AlbumIcon />,
+    label: 'Add a summary',
+    value: 'summarize',
+    onSelect: ({ editor, input }) => {
+      void editor.getApi(AIChatPlugin).aiChat.submit(input, {
+        mode: 'insert',
+        prompt: {
+          default: 'Summarize {editor}',
+          selecting: 'Summarize'
+        },
+        toolName: 'generate'
+      });
+    }
+  },
+  tryAgain: {
+    icon: <CornerUpLeftIcon />,
+    label: 'Try again',
+    value: 'tryAgain',
+    onSelect: ({ editor, store }) => {
+      void editor.getApi(AIChatPlugin).aiChat.reload();
+
+      setTimeout(() => {
+        const anchor = editor
+          .getApi(BlockSelectionPlugin)
+          .blockSelection.getNodes({ selectionFallback: true, sort: true })
+          .at(-1)!;
+        const anchorDom = editor.api.toDOMNode(anchor[0])!;
+
+        store.setAnchorElement(anchorDom);
+      }, 0);
+    }
+  }
+} satisfies Record<
+  string,
+  {
+    icon: ReactNode;
+    label: string;
+    value: string;
+    component?: ComponentType<{ menuState: EditorChatState; input?: string }>;
+    filterItems?: boolean;
+    items?: { label: string; value: string }[];
+    shortcut?: string;
+    onSelect?: ({
+      aiEditor,
+      editor,
+      input,
+      store
+    }: {
+      aiEditor: PlateEditor;
+      editor: PlateEditor;
+      input: string;
+      store: any;
+    }) => void;
+  }
+>;
+
+const menuStateItems = {
+  cursorCommand: [
+    {
+      items: [aiChatItems.continueWrite, aiChatItems.summarize, aiChatItems.explain]
+    }
+  ],
+  cursorSuggestion: [
+    {
+      items: [aiChatItems.accept, aiChatItems.discard, aiChatItems.tryAgain]
+    }
+  ],
+  selectionCommand: [
+    {
+      items: [
+        aiChatItems.improveWriting,
+        aiChatItems.makeLonger,
+        aiChatItems.makeShorter,
+        aiChatItems.fixSpelling,
+        aiChatItems.simplifyLanguage
+      ]
+    },
+    {
+      items: [aiChatItems[GROUP.SELECTION_LANGUAGES]]
+    }
+  ],
+  selectionSuggestion: [
+    {
+      items: [
+        aiChatItems.accept,
+        aiChatItems.discard,
+        aiChatItems.insertBelow,
+        aiChatItems.tryAgain
+      ]
+    }
+  ]
+};
+
+function AIMenuItems({
+  input,
+  setInput,
+  store
+}: {
+  input: string;
+  store: any;
+  setInput: (value: string) => void;
+}) {
+  const editor = useEditorRef();
+  const [searchValue] = useComboboxValueState();
+  const { messages } = usePluginOption(AIChatPlugin, 'chat');
+  const aiEditor = usePluginOption(AIChatPlugin, 'aiEditor')!;
+  const isSelecting = useIsSelecting();
+
+  const menuState = useMemo(() => {
+    if (messages && messages.length > 0) {
+      return isSelecting ? 'selectionSuggestion' : 'cursorSuggestion';
+    }
+
+    return isSelecting ? 'selectionCommand' : 'cursorCommand';
+  }, [isSelecting, messages]);
+
+  const menuGroups = useMemo(() => {
+    const items = menuStateItems[menuState] || [];
+
+    return filterMenuGroups(items, searchValue) || items;
+  }, [menuState, searchValue]);
+
+  return (
+    <>
+      {menuGroups.map((group, index) => (
+        <MenuGroup key={index} label={group.label}>
+          {group.items?.map((item: Action) => {
+            const menuItem = (aiChatItems as any)[item.value!];
+
+            if (menuItem.component) {
+              const ItemComponent = menuItem.component;
+
+              return (
+                <ItemComponent
+                  input={input}
+                  key={item.value}
+                  menuState={menuState} />
+              );
+            }
+
+            return (
+              <MenuItem
+                icon={menuItem.icon}
+                key={item.value}
+                label={menuItem.label}
+                onClick={() => {
+                  menuItem.onSelect?.({
+                    aiEditor, editor, input, store
+                  });
+                  setInput('');
+                }}
+                shortcutEnter />
+            );
+          })}
+        </MenuGroup>
+      ))}
+    </>
+  );
+}
+
+function TranslateMenuItems({
+  input = '',
+  menuState
+}: {
+  menuState: EditorChatState;
+  input?: string;
+}) {
+  const editor = useEditorRef();
+  const [searchValue] = useComboboxValueState();
+
+  const menuItems = useMemo(
+    () => filterMenuItems(aiChatItems[GROUP.LANGUAGES], searchValue),
+    [searchValue]
+  );
+
+  const handleTranslate = (value: string) => {
+    if (menuState === 'cursorCommand') {
+      void editor.getApi(AIChatPlugin).aiChat.submit(input, {
+        mode: 'insert',
+        prompt: `Translate to ${value} the "Block" content`,
+        toolName: 'edit'
+      });
+
+      return;
+    }
+    if (menuState === 'selectionCommand') {
+      void editor.getApi(AIChatPlugin).aiChat.submit(input, {
+        prompt: `Translate to ${value}`,
+        toolName: 'edit'
+      });
+
+      return;
+    }
+  };
+
+  const content = (
+    <>
+      {menuItems.map(item => (
+        <MenuItem
+          icon={item.icon}
+          key={item.value}
+          label={item.label}
+          onClick={() => handleTranslate(item.label!)}
+          shortcutEnter />
+      ))}
+    </>
+  );
+
+  if (searchValue)
+    return (
+      <MenuGroup label={aiChatItems[GROUP.LANGUAGES].label}>
+        {content}
+      </MenuGroup>
+    );
+
+  return (
+    <Menu
+      trigger={
+        <MenuTrigger
+          icon={aiChatItems[GROUP.LANGUAGES].icon}
+          label={aiChatItems[GROUP.LANGUAGES].label} />
+      }>
+      <MenuContent variant="aiSub">
+        <MenuGroup>{content}</MenuGroup>
+      </MenuContent>
+    </Menu>
+  );
+}
+
+function AIMenuCombobox({
+  input,
+  onSubmit,
+  setInput
+}: {
+  input: string;
+  onSubmit: (value: string) => void;
+  setInput: (value: string) => void;
+}) {
+  const { api } = useEditorPlugin(AIChatPlugin);
+  const [, setValue] = useComboboxValueState();
+
+  useEffect(() => {
+    setValue(input ?? '');
+  }, [input, setValue]);
+
+  return (
+    <ComboboxInput autoFocus autoSelect="always">
+      <TextareaAutosize
+        className="grow"
+        data-plate-focus
+        onChange={e => setInput(e.target.value)}
+        onKeyDown={(e) => {
+          if (isHotkey('backspace')(e) && input?.length === 0) {
+            e.preventDefault();
+            api.aiChat.hide();
+          }
+          if (isHotkey('enter')(e) && !e.shiftKey) {
+            e.preventDefault();
+
+            if (input && input.length > 0) {
+              onSubmit(input);
+            }
+          }
+        }}
+        placeholder="Ask AI anything..."
+        variant="ai" />
+    </ComboboxInput>
+  );
+}
+
+function StopIcon() {
+  return (
+    <svg
+      height="20"
+      viewBox="0 0 20 20"
+      width="20"
+      xmlns="http://www.w3.org/2000/svg">
+      <circle cx="10" cy="10" fill="black" r="10" />
+      <rect fill="white" height="6" rx="1" width="6" x="7" y="7" />
+    </svg>
+  );
+}
+
+function SubmitIcon() {
+  return (
+    <div
+      className={cn(
+        'flex size-5 items-center justify-center rounded-full bg-brand'
+      )}>
+      <ArrowUpIcon className="size-3! stroke-[3px] text-background" />
+    </div>
+  );
+}
+
+function LoadingIcon() {
+  return (
+    <div className="flex gap-0.5">
+      {['#eab308', '#ea580c', '#6EB6F2'].map((color, index) => (
+        <div
+          className="size-1 animate-ai-bounce rounded-full"
+          key={color}
+          style={{
+            animationDelay: `${index * 0.1}s`,
+            backgroundColor: color
+          }} />
+      ))}
+    </div>
+  );
+}