From b2a435b2c2beddc2297bf31b035b27d189df6d67 Mon Sep 17 00:00:00 2001 From: Matthew Lipski Date: Wed, 16 Jul 2025 23:59:24 +0200 Subject: [PATCH 1/3] Updated UX for Mantine AI menu --- packages/mantine/src/components.tsx | 2 +- packages/mantine/src/form/TextInput.tsx | 2 +- packages/mantine/src/style.css | 57 +++++++++++- .../react/src/editor/ComponentsContext.tsx | 2 +- .../xl-ai/src/components/AIMenu/AIMenu.tsx | 85 ++++++++--------- .../AIMenu/PromptSuggestionMenu.tsx | 92 +++++++++++-------- 6 files changed, 146 insertions(+), 94 deletions(-) diff --git a/packages/mantine/src/components.tsx b/packages/mantine/src/components.tsx index 7d01c5c936..a3f8095bf3 100644 --- a/packages/mantine/src/components.tsx +++ b/packages/mantine/src/components.tsx @@ -82,7 +82,7 @@ export const components: Components = { Group: BadgeGroup, }, Form: { - Root: (props) =>
{props.children}
, + Root: (props) => <>{props.children}, TextInput: TextInput, }, Menu: { diff --git a/packages/mantine/src/form/TextInput.tsx b/packages/mantine/src/form/TextInput.tsx index b781073588..265ed819af 100644 --- a/packages/mantine/src/form/TextInput.tsx +++ b/packages/mantine/src/form/TextInput.tsx @@ -33,7 +33,7 @@ export const TextInput = forwardRef< size={"xs"} className={mergeCSSClasses( className || "", - variant === "large" ? "bn-mt-input-large" : "" + variant === "large" ? "bn-mt-input-large" : "", )} ref={ref} name={name} diff --git a/packages/mantine/src/style.css b/packages/mantine/src/style.css index e2a2273aa4..9f665e8f67 100644 --- a/packages/mantine/src/style.css +++ b/packages/mantine/src/style.css @@ -766,26 +766,73 @@ } /* Combobox styling */ -.bn-mantine .bn-combobox-input, +.bn-mantine .bn-combobox-input-wrapper, .bn-mantine .bn-combobox-items:not(:empty) { background-color: var(--bn-colors-menu-background); border: var(--bn-border); border-radius: var(--bn-border-radius-medium); box-shadow: var(--bn-shadow-medium); color: var(--bn-colors-menu-text); - gap: 4px; min-width: 145px; padding: 2px; } -.bn-mantine .bn-combobox-input .bn-combobox-icon, -.bn-mantine .bn-combobox-input .bn-combobox-right-section { +.bn-mantine .bn-combobox-input-wrapper, +.bn-mantine .bn-combobox-input, +.bn-mantine .bn-combobox-loader, +.bn-mantine .bn-combobox-left-section, +.bn-mantine .bn-combobox-right-section { align-items: center; display: flex; justify-content: center; } -.bn-mantine .bn-combobox-input .bn-combobox-error { +.bn-mantine .bn-combobox-input, +.bn-mantine .bn-combobox-loader { + flex: 1; + justify-content: flex-start; + width: 0; +} + +.bn-mantine .bn-combobox-input > div { + width: 100%; +} + +.bn-mantine .bn-combobox-input input { + padding: 0; +} + +.bn-mantine .bn-ai-loader { + align-items: center; + color: var(--bn-colors-side-menu); + display: flex; + font-family: var(--bn-font-family); + font-size: 14px; + gap: 4px; + height: 52px; + justify-content: flex-start; + width: 100%; +} + +.bn-mantine .bn-ai-loader-icon { + width: fit-content; +} + +.bn-mantine .bn-ai-icon, +.bn-mantine .bn-ai-stop, +.bn-mantine .bn-ai-error { + align-items: center; + color: var(--bn-colors-menu-text); + display: flex; + justify-content: center; + width: 28px; +} + +.bn-mantine .bn-ai-stop { + cursor: pointer; +} + +.bn-mantine .bn-ai-error { color: var(--bn-colors-highlights-red-background); } diff --git a/packages/react/src/editor/ComponentsContext.tsx b/packages/react/src/editor/ComponentsContext.tsx index 2eb161d828..80486df5b5 100644 --- a/packages/react/src/editor/ComponentsContext.tsx +++ b/packages/react/src/editor/ComponentsContext.tsx @@ -262,7 +262,7 @@ export type ComponentProps = { name: string; label?: string; variant?: "default" | "large"; - icon: ReactNode; + icon?: ReactNode; rightSection?: ReactNode; autoFocus?: boolean; placeholder?: string; diff --git a/packages/xl-ai/src/components/AIMenu/AIMenu.tsx b/packages/xl-ai/src/components/AIMenu/AIMenu.tsx index 3fc4db4782..cb6d6daf79 100644 --- a/packages/xl-ai/src/components/AIMenu/AIMenu.tsx +++ b/packages/xl-ai/src/components/AIMenu/AIMenu.tsx @@ -1,7 +1,11 @@ import { BlockNoteEditor } from "@blocknote/core"; import { useBlockNoteEditor, useComponentsContext } from "@blocknote/react"; import { useCallback, useEffect, useMemo, useState } from "react"; -import { RiSparkling2Fill } from "react-icons/ri"; +import { + RiErrorWarningFill, + RiSparkling2Fill, + RiStopCircleFill, +} from "react-icons/ri"; import { useStore } from "zustand"; import { getAIExtension } from "../../AIExtension.js"; @@ -80,66 +84,55 @@ export const AIMenu = (props: AIMenuProps) => { }, [aiResponseStatus]); const placeholder = useMemo(() => { - if (aiResponseStatus === "thinking") { - return dict.ai_menu.status.thinking; - } else if (aiResponseStatus === "ai-writing") { - return dict.ai_menu.status.editing; - } else if (aiResponseStatus === "error") { + if (aiResponseStatus === "error") { return dict.ai_menu.status.error; } return dict.ai_menu.input_placeholder; }, [aiResponseStatus, dict]); - const rightSection = useMemo(() => { - if (aiResponseStatus === "thinking" || aiResponseStatus === "ai-writing") { - return ( - // TODO -
ai.abort()}> + return ( + setPrompt(e.target.value), + onSubmit: () => + props.onManualPromptSubmit?.(prompt) || + onManualPromptSubmitDefault(prompt), + placeholder, + }} + loader={ +
+ + {aiResponseStatus === "ai-writing" + ? dict.ai_menu.status.editing + : dict.ai_menu.status.thinking} +
- ); - } else if (aiResponseStatus === "error") { - return ( -
- {/* Taken from Google Material Icons */} - {/* https://fonts.google.com/icons?selected=Material+Symbols+Rounded:error:FILL@0;wght@400;GRAD@0;opsz@24&icon.query=error&icon.size=24&icon.color=%23e8eaed&icon.set=Material+Symbols&icon.style=Rounded&icon.platform=web */} - - - -
- ); - } - - return undefined; - }, [Components, aiResponseStatus, ai]); - - return ( - + leftSection={ +
} - rightSection={rightSection} + rightSection={ + aiResponseStatus === "thinking" || aiResponseStatus === "ai-writing" ? ( +
+ +
+ ) : aiResponseStatus === "error" ? ( +
ai.abort()}> + +
+ ) : undefined + } /> ); }; diff --git a/packages/xl-ai/src/components/AIMenu/PromptSuggestionMenu.tsx b/packages/xl-ai/src/components/AIMenu/PromptSuggestionMenu.tsx index b18e423a8a..c63d39de22 100644 --- a/packages/xl-ai/src/components/AIMenu/PromptSuggestionMenu.tsx +++ b/packages/xl-ai/src/components/AIMenu/PromptSuggestionMenu.tsx @@ -1,5 +1,6 @@ import { filterSuggestionItems, mergeCSSClasses } from "@blocknote/core"; import { + ComponentProps, DefaultReactSuggestionItem, useComponentsContext, useSuggestionMenuKeyboardHandler, @@ -16,48 +17,48 @@ import { export type PromptSuggestionMenuProps = { items: DefaultReactSuggestionItem[]; - onManualPromptSubmit: (userPrompt: string) => void; - promptText?: string; - onPromptTextChange?: (userPrompt: string) => void; - icon?: ReactNode; + inputProps: Partial< + Omit< + ComponentProps["Generic"]["Form"]["TextInput"], + "name" | "label" | "variant" | "autoFocus" | "autoComplete" + > + >; + loader?: ReactNode; + isLoading?: boolean; + leftSection?: ReactNode; rightSection?: ReactNode; - placeholder?: string; - disabled?: boolean; }; export const PromptSuggestionMenu = (props: PromptSuggestionMenuProps) => { // const dict = useAIDictionary(); const Components = useComponentsContext()!; - const { onManualPromptSubmit, promptText, onPromptTextChange } = props; + const { value, onKeyDown, onChange, onSubmit, ...rest } = props.inputProps; - // Only used internal state when `props.prompText` is undefined (i.e., uncontrolled mode) + // Only used internal state when `promptText` is undefined (i.e., uncontrolled mode) const [internalPromptText, setInternalPromptText] = useState(""); - const promptTextToUse = promptText || internalPromptText; + const promptTextToUse = value || internalPromptText; const handleEnter = useCallback( - async (event: KeyboardEvent) => { + async (event: KeyboardEvent) => { + onKeyDown?.(event); if (event.key === "Enter") { - // console.log("ENTER", currentEditingPrompt); - onManualPromptSubmit(promptTextToUse); + onSubmit?.(); } }, - [promptTextToUse, onManualPromptSubmit], + [onKeyDown, onSubmit], ); const handleChange = useCallback( (event: ChangeEvent) => { - const newValue = event.currentTarget.value; - if (onPromptTextChange) { - onPromptTextChange(newValue); - } + onChange?.(event); // Only update internal state if it's uncontrolled - if (promptText === undefined) { - setInternalPromptText(newValue); + if (value === undefined) { + setInternalPromptText(event.currentTarget.value); } }, - [onPromptTextChange, setInternalPromptText, promptText], + [onChange, value], ); const items: DefaultReactSuggestionItem[] = useMemo(() => { @@ -68,7 +69,7 @@ export const PromptSuggestionMenu = (props: PromptSuggestionMenuProps) => { useSuggestionMenuKeyboardHandler(items, (item) => item.onItemClick()); const handleKeyDown = useCallback( - (event: KeyboardEvent) => { + (event: KeyboardEvent) => { // TODO: handle backspace to close if (event.key === "Enter") { if (items.length > 0) { @@ -91,27 +92,38 @@ export const PromptSuggestionMenu = (props: PromptSuggestionMenuProps) => { return (
- - - +
+ {props.leftSection && ( +
{props.leftSection}
+ )} + {!props.isLoading || !props.loader ? ( +
+ + + +
+ ) : ( +
{props.loader}
+ )} + {props.rightSection && ( +
{props.rightSection}
+ )} +
+ id={"ai-suggestion-menu"} + > {items.map((item, i) => ( Date: Thu, 17 Jul 2025 00:55:46 +0200 Subject: [PATCH 2/3] Removed ellipses from locales for AI menu --- packages/xl-ai/src/i18n/locales/ar.ts | 4 ++-- packages/xl-ai/src/i18n/locales/de.ts | 4 ++-- packages/xl-ai/src/i18n/locales/en.ts | 4 ++-- packages/xl-ai/src/i18n/locales/es.ts | 4 ++-- packages/xl-ai/src/i18n/locales/fr.ts | 4 ++-- packages/xl-ai/src/i18n/locales/he.ts | 4 ++-- packages/xl-ai/src/i18n/locales/hr.ts | 4 ++-- packages/xl-ai/src/i18n/locales/is.ts | 4 ++-- packages/xl-ai/src/i18n/locales/it.ts | 4 ++-- packages/xl-ai/src/i18n/locales/ja.ts | 4 ++-- packages/xl-ai/src/i18n/locales/ko.ts | 4 ++-- packages/xl-ai/src/i18n/locales/nl.ts | 4 ++-- packages/xl-ai/src/i18n/locales/no.ts | 4 ++-- packages/xl-ai/src/i18n/locales/pl.ts | 4 ++-- packages/xl-ai/src/i18n/locales/pt.ts | 4 ++-- packages/xl-ai/src/i18n/locales/ru.ts | 4 ++-- packages/xl-ai/src/i18n/locales/sk.ts | 4 ++-- packages/xl-ai/src/i18n/locales/uk.ts | 4 ++-- packages/xl-ai/src/i18n/locales/vi.ts | 4 ++-- packages/xl-ai/src/i18n/locales/zh-tw.ts | 4 ++-- packages/xl-ai/src/i18n/locales/zh.ts | 4 ++-- 21 files changed, 42 insertions(+), 42 deletions(-) diff --git a/packages/xl-ai/src/i18n/locales/ar.ts b/packages/xl-ai/src/i18n/locales/ar.ts index 80232f0c1a..ed8a402e8d 100644 --- a/packages/xl-ai/src/i18n/locales/ar.ts +++ b/packages/xl-ai/src/i18n/locales/ar.ts @@ -59,8 +59,8 @@ export const ar: AIDictionary = { ai_menu: { input_placeholder: "اسأل الذكاء الاصطناعي أي شيء…", status: { - thinking: "جاري التفكير…", - editing: "جاري التحرير…", + thinking: "جاري التفكير", + editing: "جاري التحرير", error: "عذراً! حدث خطأ ما", }, actions: { diff --git a/packages/xl-ai/src/i18n/locales/de.ts b/packages/xl-ai/src/i18n/locales/de.ts index 88cc947a44..2f02caae4f 100644 --- a/packages/xl-ai/src/i18n/locales/de.ts +++ b/packages/xl-ai/src/i18n/locales/de.ts @@ -59,8 +59,8 @@ export const de: AIDictionary = { ai_menu: { input_placeholder: "Frage die KI was auch immer…", status: { - thinking: "Denke nach…", - editing: "Bearbeite…", + thinking: "Denke nach", + editing: "Bearbeite", error: "Ups! Etwas ist schiefgelaufen", }, actions: { diff --git a/packages/xl-ai/src/i18n/locales/en.ts b/packages/xl-ai/src/i18n/locales/en.ts index 87e2458671..a75d965ee3 100644 --- a/packages/xl-ai/src/i18n/locales/en.ts +++ b/packages/xl-ai/src/i18n/locales/en.ts @@ -57,8 +57,8 @@ export const en = { ai_menu: { input_placeholder: "Ask AI anything…", status: { - thinking: "Thinking…", - editing: "Editing…", + thinking: "Thinking", + editing: "Editing", error: "Oops! Something went wrong", }, actions: { diff --git a/packages/xl-ai/src/i18n/locales/es.ts b/packages/xl-ai/src/i18n/locales/es.ts index 04e6c637d9..04e61a6790 100644 --- a/packages/xl-ai/src/i18n/locales/es.ts +++ b/packages/xl-ai/src/i18n/locales/es.ts @@ -59,8 +59,8 @@ export const es: AIDictionary = { ai_menu: { input_placeholder: "Pregunta cualquier cosa a la IA…", status: { - thinking: "Pensando…", - editing: "Editando…", + thinking: "Pensando", + editing: "Editando", error: "¡Ups! Algo salió mal", }, actions: { diff --git a/packages/xl-ai/src/i18n/locales/fr.ts b/packages/xl-ai/src/i18n/locales/fr.ts index 6347f4df35..3fd81c4be0 100644 --- a/packages/xl-ai/src/i18n/locales/fr.ts +++ b/packages/xl-ai/src/i18n/locales/fr.ts @@ -59,8 +59,8 @@ export const fr: AIDictionary = { ai_menu: { input_placeholder: "Demandez n'importe quoi à l'IA…", status: { - thinking: "Réflexion…", - editing: "Édition…", + thinking: "Réflexion", + editing: "Édition", error: "Oups ! Une erreur s'est produite", }, actions: { diff --git a/packages/xl-ai/src/i18n/locales/he.ts b/packages/xl-ai/src/i18n/locales/he.ts index bfe6e8396d..f8d317233e 100644 --- a/packages/xl-ai/src/i18n/locales/he.ts +++ b/packages/xl-ai/src/i18n/locales/he.ts @@ -59,8 +59,8 @@ export const he: AIDictionary = { ai_menu: { input_placeholder: "שאול AI כלום…", status: { - thinking: "חושב…", - editing: "ערך…", + thinking: "חושב", + editing: "ערך", error: "אופס! משהו השתבש", }, actions: { diff --git a/packages/xl-ai/src/i18n/locales/hr.ts b/packages/xl-ai/src/i18n/locales/hr.ts index 0e333e2b0b..7c15db2423 100644 --- a/packages/xl-ai/src/i18n/locales/hr.ts +++ b/packages/xl-ai/src/i18n/locales/hr.ts @@ -59,8 +59,8 @@ export const hr: AIDictionary = { ai_menu: { input_placeholder: "Pitaj AI bilo što…", status: { - thinking: "Razmišljam…", - editing: "Uređujem…", + thinking: "Razmišljam", + editing: "Uređujem", error: "Ups! Nešto je pošlo po zlu", }, actions: { diff --git a/packages/xl-ai/src/i18n/locales/is.ts b/packages/xl-ai/src/i18n/locales/is.ts index 6ed787d443..f7095a41bc 100644 --- a/packages/xl-ai/src/i18n/locales/is.ts +++ b/packages/xl-ai/src/i18n/locales/is.ts @@ -59,8 +59,8 @@ export const is: AIDictionary = { ai_menu: { input_placeholder: "Spyrðu gervigreind um hvað sem er…", status: { - thinking: "Hugsa…", - editing: "Breyta…", + thinking: "Hugsa", + editing: "Breyta", error: "Ups! Eitthvað fór úrskeiðis", }, actions: { diff --git a/packages/xl-ai/src/i18n/locales/it.ts b/packages/xl-ai/src/i18n/locales/it.ts index 1f536c1bfb..adb3a62f09 100644 --- a/packages/xl-ai/src/i18n/locales/it.ts +++ b/packages/xl-ai/src/i18n/locales/it.ts @@ -59,8 +59,8 @@ export const it: AIDictionary = { ai_menu: { input_placeholder: "Chiedi qualsiasi cosa all'IA…", status: { - thinking: "Sto pensando…", - editing: "Sto modificando…", + thinking: "Sto pensando", + editing: "Sto modificando", error: "Ops! Qualcosa è andato storto", }, actions: { diff --git a/packages/xl-ai/src/i18n/locales/ja.ts b/packages/xl-ai/src/i18n/locales/ja.ts index ea9a754848..bb7087c8ad 100644 --- a/packages/xl-ai/src/i18n/locales/ja.ts +++ b/packages/xl-ai/src/i18n/locales/ja.ts @@ -59,8 +59,8 @@ export const ja: AIDictionary = { ai_menu: { input_placeholder: "AIに何でも質問…", status: { - thinking: "考え中…", - editing: "編集中…", + thinking: "考え中", + editing: "編集中", error: "申し訳ありません！エラーが発生しました", }, actions: { diff --git a/packages/xl-ai/src/i18n/locales/ko.ts b/packages/xl-ai/src/i18n/locales/ko.ts index 882176bded..7c42658285 100644 --- a/packages/xl-ai/src/i18n/locales/ko.ts +++ b/packages/xl-ai/src/i18n/locales/ko.ts @@ -59,8 +59,8 @@ export const ko: AIDictionary = { ai_menu: { input_placeholder: "AI에게 무엇이든 물어보세요…", status: { - thinking: "생각 중…", - editing: "편집 중…", + thinking: "생각 중", + editing: "편집 중", error: "죄송합니다! 오류가 발생했습니다", }, actions: { diff --git a/packages/xl-ai/src/i18n/locales/nl.ts b/packages/xl-ai/src/i18n/locales/nl.ts index a3676479ad..b3f3439e84 100644 --- a/packages/xl-ai/src/i18n/locales/nl.ts +++ b/packages/xl-ai/src/i18n/locales/nl.ts @@ -59,8 +59,8 @@ export const nl: AIDictionary = { ai_menu: { input_placeholder: "Vraag AI iets…", status: { - thinking: "Denken…", - editing: "Bewerken…", + thinking: "Denken", + editing: "Bewerken", error: "Oeps! Er is iets misgegaan", }, actions: { diff --git a/packages/xl-ai/src/i18n/locales/no.ts b/packages/xl-ai/src/i18n/locales/no.ts index 92b83b809f..d6b60b6578 100644 --- a/packages/xl-ai/src/i18n/locales/no.ts +++ b/packages/xl-ai/src/i18n/locales/no.ts @@ -59,8 +59,8 @@ export const no: AIDictionary = { ai_menu: { input_placeholder: "Spør AI om hva som helst…", status: { - thinking: "Tenker…", - editing: "Redigerer…", + thinking: "Tenker", + editing: "Redigerer", error: "Ups! Noe gikk galt", }, actions: { diff --git a/packages/xl-ai/src/i18n/locales/pl.ts b/packages/xl-ai/src/i18n/locales/pl.ts index e8ac01f84e..3eade63721 100644 --- a/packages/xl-ai/src/i18n/locales/pl.ts +++ b/packages/xl-ai/src/i18n/locales/pl.ts @@ -59,8 +59,8 @@ export const pl: AIDictionary = { ai_menu: { input_placeholder: "Zapytaj AI o cokolwiek…", status: { - thinking: "Myślę…", - editing: "Edytuję…", + thinking: "Myślę", + editing: "Edytuję", error: "Ups! Coś poszło nie tak", }, actions: { diff --git a/packages/xl-ai/src/i18n/locales/pt.ts b/packages/xl-ai/src/i18n/locales/pt.ts index bcb2a816fb..1e4551759d 100644 --- a/packages/xl-ai/src/i18n/locales/pt.ts +++ b/packages/xl-ai/src/i18n/locales/pt.ts @@ -59,8 +59,8 @@ export const pt: AIDictionary = { ai_menu: { input_placeholder: "Pergunte qualquer coisa à IA…", status: { - thinking: "Pensando…", - editing: "Editando…", + thinking: "Pensando", + editing: "Editando", error: "Ops! Algo deu errado", }, actions: { diff --git a/packages/xl-ai/src/i18n/locales/ru.ts b/packages/xl-ai/src/i18n/locales/ru.ts index 2382743e47..991d98e8f9 100644 --- a/packages/xl-ai/src/i18n/locales/ru.ts +++ b/packages/xl-ai/src/i18n/locales/ru.ts @@ -59,8 +59,8 @@ export const ru: AIDictionary = { ai_menu: { input_placeholder: "Спросите ИИ о чем угодно…", status: { - thinking: "Думаю…", - editing: "Редактирую…", + thinking: "Думаю", + editing: "Редактирую", error: "Упс! Что-то пошло не так", }, actions: { diff --git a/packages/xl-ai/src/i18n/locales/sk.ts b/packages/xl-ai/src/i18n/locales/sk.ts index b85ee5bc22..1bdd69bfa5 100644 --- a/packages/xl-ai/src/i18n/locales/sk.ts +++ b/packages/xl-ai/src/i18n/locales/sk.ts @@ -59,8 +59,8 @@ export const sk: AIDictionary = { ai_menu: { input_placeholder: "Opýtajte sa AI čokoľvek…", status: { - thinking: "Premýšľam…", - editing: "Upravujem…", + thinking: "Premýšľam", + editing: "Upravujem", error: "Ups! Niečo sa pokazilo", }, actions: { diff --git a/packages/xl-ai/src/i18n/locales/uk.ts b/packages/xl-ai/src/i18n/locales/uk.ts index 8794eb9e97..dcf8f85006 100644 --- a/packages/xl-ai/src/i18n/locales/uk.ts +++ b/packages/xl-ai/src/i18n/locales/uk.ts @@ -59,8 +59,8 @@ export const uk: AIDictionary = { ai_menu: { input_placeholder: "Запитайте ШІ про що завгодно…", status: { - thinking: "Думаю…", - editing: "Редагую…", + thinking: "Думаю", + editing: "Редагую", error: "На жаль! Щось пішло не так", }, actions: { diff --git a/packages/xl-ai/src/i18n/locales/vi.ts b/packages/xl-ai/src/i18n/locales/vi.ts index ad4472b697..18e3d5e83d 100644 --- a/packages/xl-ai/src/i18n/locales/vi.ts +++ b/packages/xl-ai/src/i18n/locales/vi.ts @@ -59,8 +59,8 @@ export const vi: AIDictionary = { ai_menu: { input_placeholder: "Hỏi AI bất cứ điều gì…", status: { - thinking: "Đang suy nghĩ…", - editing: "Đang chỉnh sửa…", + thinking: "Đang suy nghĩ", + editing: "Đang chỉnh sửa", error: "Rất tiếc! Đã xảy ra lỗi", }, actions: { diff --git a/packages/xl-ai/src/i18n/locales/zh-tw.ts b/packages/xl-ai/src/i18n/locales/zh-tw.ts index d30ef43ed2..be9c9a4663 100644 --- a/packages/xl-ai/src/i18n/locales/zh-tw.ts +++ b/packages/xl-ai/src/i18n/locales/zh-tw.ts @@ -59,8 +59,8 @@ export const zhTw: AIDictionary = { ai_menu: { input_placeholder: "向人工智慧提問任何問題…", status: { - thinking: "思考中…", - editing: "編輯中…", + thinking: "思考中", + editing: "編輯中", error: "哎呀！發生了一些錯誤", }, actions: { diff --git a/packages/xl-ai/src/i18n/locales/zh.ts b/packages/xl-ai/src/i18n/locales/zh.ts index 9ba366b300..d4342b1f5b 100644 --- a/packages/xl-ai/src/i18n/locales/zh.ts +++ b/packages/xl-ai/src/i18n/locales/zh.ts @@ -59,8 +59,8 @@ export const zh: AIDictionary = { ai_menu: { input_placeholder: "向人工智能提问任何问题…", status: { - thinking: "思考中…", - editing: "编辑中…", + thinking: "思考中", + editing: "编辑中", error: "哎呀！出了点问题", }, actions: { From 2ab0b325950d4a521e759d147c91b601f4af1839 Mon Sep 17 00:00:00 2001 From: Matthew Lipski Date: Thu, 17 Jul 2025 04:40:03 +0200 Subject: [PATCH 3/3] Added comment --- .../xl-ai/src/components/AIMenu/PromptSuggestionMenu.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/xl-ai/src/components/AIMenu/PromptSuggestionMenu.tsx b/packages/xl-ai/src/components/AIMenu/PromptSuggestionMenu.tsx index c63d39de22..9244d33731 100644 --- a/packages/xl-ai/src/components/AIMenu/PromptSuggestionMenu.tsx +++ b/packages/xl-ai/src/components/AIMenu/PromptSuggestionMenu.tsx @@ -23,6 +23,14 @@ export type PromptSuggestionMenuProps = { "name" | "label" | "variant" | "autoFocus" | "autoComplete" > >; + // This loader element was added as a prop to mimic Notion's UX for the AI + // menu. When the AI is generating, Notion puts a loading indicator right + // after the "Thinking" text. While it would be better to do this by just + // setting the `placeholder` and `rightSection` props of the loader, text + // input width can't be constrained to the size of its content, so we can't + // place the loading indicator right after. This prop therefore exists so + // that we don't have to show the text input while `isLoading` is `true`, and + // can instead render whatever we want. loader?: ReactNode; isLoading?: boolean; leftSection?: ReactNode;