@allbluecn/web-app 0.4.8 → 0.4.10

package/src/components/hextaui/command-menu.tsx

@@ -0,0 +1,460 @@
+"use client";
+
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
+import { Search, X, Command, Option, ArrowBigUp, ArrowUp, ArrowDown, ArrowLeft, ArrowRight, Delete, Space } from "lucide-react";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import { ScrollArea } from "@/components/ui/scroll-area";
+
+interface CommandMenuContextType {
+  value: string;
+  setValue: (value: string) => void;
+  selectedIndex: number;
+  setSelectedIndex: (index: number) => void;
+  scrollType?: "auto" | "always" | "scroll" | "hover";
+  scrollHideDelay?: number;
+}
+
+const CommandMenuContext = React.createContext<
+  CommandMenuContextType | undefined
+>(undefined);
+
+const CommandMenuProvider: React.FC<{
+  children: React.ReactNode;
+  value: string;
+  setValue: (value: string) => void;
+  selectedIndex: number;
+  setSelectedIndex: (index: number) => void;
+  scrollType?: "auto" | "always" | "scroll" | "hover";
+  scrollHideDelay?: number;
+}> = ({
+  children,
+  value,
+  setValue,
+  selectedIndex,
+  setSelectedIndex,
+  scrollType,
+  scrollHideDelay,
+}) => (
+  <CommandMenuContext.Provider
+    value={{
+      value,
+      setValue,
+      selectedIndex,
+      setSelectedIndex,
+      scrollType,
+      scrollHideDelay,
+    }}
+  >
+    {children}
+  </CommandMenuContext.Provider>
+);
+
+const useCommandMenu = () => {
+  const context = React.useContext(CommandMenuContext);
+  if (!context)
+    throw new Error("useCommandMenu must be used within CommandMenuProvider");
+  return context;
+};
+
+const CommandMenu = DialogPrimitive.Root;
+const CommandMenuTrigger = DialogPrimitive.Trigger;
+const CommandMenuPortal = DialogPrimitive.Portal;
+const CommandMenuClose = DialogPrimitive.Close;
+
+const CommandMenuTitle = React.forwardRef<
+  React.ComponentRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    className={cn(
+      "font-semibold text-foreground text-lg leading-none tracking-tight",
+      className
+    )}
+    ref={ref}
+    {...props}
+  />
+));
+CommandMenuTitle.displayName = "CommandMenuTitle";
+
+const CommandMenuDescription = React.forwardRef<
+  React.ComponentRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    className={cn("text-muted-foreground text-sm", className)}
+    ref={ref}
+    {...props}
+  />
+));
+CommandMenuDescription.displayName = "CommandMenuDescription";
+
+const CommandMenuOverlay = React.forwardRef<
+  React.ComponentRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    className={cn(
+      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50 backdrop-blur-sm data-[state=closed]:animate-out data-[state=open]:animate-in",
+      className
+    )}
+    ref={ref}
+    {...props}
+  />
+));
+CommandMenuOverlay.displayName = "CommandMenuOverlay";
+
+const CommandMenuContent = React.forwardRef<
+  React.ComponentRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
+    showShortcut?: boolean;
+    scrollType?: "auto" | "always" | "scroll" | "hover";
+    scrollHideDelay?: number;
+  }
+>(
+  (
+    {
+      className,
+      children,
+      showShortcut = true,
+      scrollType = "hover",
+      scrollHideDelay = 600,
+      ...props
+    },
+    ref
+  ) => {
+    const [value, setValue] = React.useState("");
+    const [selectedIndex, setSelectedIndex] = React.useState(0);
+
+    React.useEffect(() => {
+      const handleKeyDown = (e: KeyboardEvent) => {
+        if (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Enter") {
+          e.preventDefault();
+        }
+      };
+      document.addEventListener("keydown", handleKeyDown);
+      return () => document.removeEventListener("keydown", handleKeyDown);
+    }, []);
+
+    return (
+      <CommandMenuPortal>
+        <CommandMenuOverlay />
+        <DialogPrimitive.Content asChild ref={ref} {...props}>
+          <div
+            className={cn(
+              "fixed top-[30%] left-1/2 z-50 w-auto max-w-none -translate-x-1/2 -translate-y-1/2",
+              "rounded-xl border border-border bg-background",
+              "overflow-hidden",
+              "motion-safe:duration-200 motion-reduce:animate-none",
+              className
+            )}
+          >
+            <CommandMenuProvider
+              scrollHideDelay={scrollHideDelay}
+              scrollType={scrollType}
+              selectedIndex={selectedIndex}
+              setSelectedIndex={setSelectedIndex}
+              setValue={setValue}
+              value={value}
+            >
+              <VisuallyHidden.Root>
+                <CommandMenuTitle>Command Menu</CommandMenuTitle>
+              </VisuallyHidden.Root>
+              {children}
+              <CommandMenuClose className="absolute top-3 right-3 rounded-lg p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
+                <X size={14} />
+                <span className="sr-only">Close</span>
+              </CommandMenuClose>
+              {showShortcut && (
+                <div className="absolute top-3 right-12 flex h-6 items-center justify-center gap-1">
+                  <kbd
+                    data-slot="kbd"
+                    className="inline-flex items-center justify-center rounded px-1.5 py-1 font-mono text-[10px] font-medium text-muted-foreground bg-muted h-[22px] min-w-[22px] leading-none"
+                  >
+                    <Command size={10} />
+                  </kbd>
+                  <kbd
+                    data-slot="kbd"
+                    className="inline-flex items-center justify-center rounded px-1.5 py-1 font-mono text-[10px] font-medium text-muted-foreground bg-muted h-[22px] min-w-[22px] leading-none"
+                  >
+                    <span className="text-xs font-medium">K</span>
+                  </kbd>
+                  <span className="text-xs text-muted-foreground">/</span>
+                  <kbd
+                    data-slot="kbd"
+                    className="inline-flex items-center justify-center rounded px-1.5 py-1 font-mono text-[10px] font-medium text-muted-foreground bg-muted h-[22px] min-w-[22px] leading-none"
+                  >
+                    <span className="text-xs font-medium">ESC</span>
+                  </kbd>
+                </div>
+              )}
+            </CommandMenuProvider>
+          </div>
+        </DialogPrimitive.Content>
+      </CommandMenuPortal>
+    );
+  }
+);
+CommandMenuContent.displayName = "CommandMenuContent";
+
+const CommandMenuInput = React.forwardRef<
+  HTMLInputElement,
+  React.InputHTMLAttributes<HTMLInputElement> & { placeholder?: string }
+>(
+  (
+    { className, placeholder = "Type a command or search...", ...props },
+    ref
+  ) => {
+    const { value, setValue } = useCommandMenu();
+    return (
+      <div className="flex items-center gap-2 border-border border-b px-3 py-0">
+        <Search className="size-4 shrink-0 text-muted-foreground" />
+        <input
+          className={cn(
+            "h-12 w-full rounded-none border-0 bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+            className
+          )}
+          onChange={(e) => setValue(e.target.value)}
+          placeholder={placeholder}
+          ref={ref}
+          value={value}
+          {...props}
+        />
+      </div>
+    );
+  }
+);
+CommandMenuInput.displayName = "CommandMenuInput";
+
+const CommandMenuList = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & { maxHeight?: string }
+>(({ className, children, maxHeight = "300px", ...props }, ref) => {
+  const {
+    selectedIndex,
+    setSelectedIndex,
+    scrollType = "hover",
+    scrollHideDelay = 600,
+  } = useCommandMenu();
+
+  React.useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      const items = document.querySelectorAll("[data-command-item]");
+      const maxIndex = items.length - 1;
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        const newIndex = Math.min(selectedIndex + 1, maxIndex);
+        setSelectedIndex(newIndex);
+        (items[newIndex] as HTMLElement | undefined)?.scrollIntoView({
+          block: "nearest",
+          behavior: "smooth",
+        });
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        const newIndex = Math.max(selectedIndex - 1, 0);
+        setSelectedIndex(newIndex);
+        (items[newIndex] as HTMLElement | undefined)?.scrollIntoView({
+          block: "nearest",
+          behavior: "smooth",
+        });
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [selectedIndex, setSelectedIndex]);
+
+  return (
+    <div className="p-1" ref={ref} {...props}>
+      <ScrollArea
+        className={cn("w-full", className)}
+        scrollHideDelay={scrollHideDelay}
+        style={{ height: maxHeight }}
+        type={scrollType}
+      >
+        <div className="flex flex-col gap-0.5 p-0.5">{children}</div>
+      </ScrollArea>
+    </div>
+  );
+});
+CommandMenuList.displayName = "CommandMenuList";
+
+const CommandMenuGroup = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & { heading?: string }
+>(({ className, children, heading, ...props }, ref) => (
+  <div className={cn("", className)} ref={ref} {...props}>
+    {heading && (
+      <div className="px-2 py-1.5 font-medium text-muted-foreground text-xs uppercase tracking-wider">
+        {heading}
+      </div>
+    )}
+    {children}
+  </div>
+));
+CommandMenuGroup.displayName = "CommandMenuGroup";
+
+const CommandMenuItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & {
+    onSelect?: () => void;
+    disabled?: boolean;
+    shortcut?: string;
+    icon?: React.ReactNode;
+    index?: number;
+  }
+>(
+  (
+    {
+      className,
+      children,
+      onSelect,
+      disabled = false,
+      shortcut,
+      icon,
+      index = 0,
+      ...props
+    },
+    ref
+  ) => {
+    const { selectedIndex, setSelectedIndex } = useCommandMenu();
+    const isSelected = selectedIndex === index;
+
+    const handleSelect = React.useCallback(() => {
+      if (!disabled && onSelect) onSelect();
+    }, [disabled, onSelect]);
+
+    React.useEffect(() => {
+      const handleKeyDown = (e: KeyboardEvent) => {
+        if (e.key === "Enter" && isSelected) {
+          e.preventDefault();
+          handleSelect();
+        }
+      };
+      document.addEventListener("keydown", handleKeyDown);
+      return () => document.removeEventListener("keydown", handleKeyDown);
+    }, [isSelected, handleSelect]);
+
+    return (
+      <div
+        className={cn(
+          "relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none transition-colors",
+          "hover:bg-accent hover:text-accent-foreground",
+          isSelected && "bg-accent text-accent-foreground",
+          disabled && "pointer-events-none opacity-50",
+          className
+        )}
+        data-command-item
+        onClick={handleSelect}
+        onMouseEnter={() => setSelectedIndex(index)}
+        ref={ref}
+        {...props}
+      >
+        {icon && (
+          <div className="flex size-4 items-center justify-center">{icon}</div>
+        )}
+        <div className="flex-1">{children}</div>
+        {shortcut && (
+          <div className="ml-auto flex items-center gap-1">
+            {shortcut.split("+").map((key, i) => (
+              <React.Fragment key={`${key}-${i}`}>
+                {i > 0 && (
+                  <span className="text-muted-foreground text-xs">+</span>
+                )}
+                <kbd
+                  data-slot="kbd"
+                  className={cn(
+                    "inline-flex items-center justify-center rounded px-1.5 py-1 font-mono text-[10px] font-medium text-muted-foreground bg-muted h-[22px] min-w-[22px] leading-none"
+                  )}
+                >
+                  {key === "CMD" || key === "⌘" ? (
+                    <Command size={10} />
+                  ) : key === "OPTION" || key === "ALT" ? (
+                    <Option size={14} />
+                  ) : key === "SHIFT" ? (
+                    <ArrowBigUp size={13} />
+                  ) : key === "CTRL" ? (
+                    <span className="text-xs font-medium">CTRL</span>
+                  ) : key === "ESC" || key === "ESCAPE" ? (
+                    <span className="text-xs font-medium">ESC</span>
+                  ) : key === "DELETE" || key === "BACKSPACE" ? (
+                    <Delete size={14} />
+                  ) : key === "ARROWUP" ? (
+                    <ArrowUp size={14} />
+                  ) : key === "ARROWDOWN" ? (
+                    <ArrowDown size={14} />
+                  ) : key === "ARROWLEFT" ? (
+                    <ArrowLeft size={14} />
+                  ) : key === "ARROWRIGHT" ? (
+                    <ArrowRight size={14} />
+                  ) : key === "SPACE" ? (
+                    <Space size={14} />
+                  ) : (
+                    <span className="text-xs font-medium">{key}</span>
+                  )}
+                </kbd>
+              </React.Fragment>
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+CommandMenuItem.displayName = "CommandMenuItem";
+
+const CommandMenuSeparator = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    className={cn("-mx-1 my-1 h-px bg-border", className)}
+    ref={ref}
+    {...props}
+  />
+));
+CommandMenuSeparator.displayName = "CommandMenuSeparator";
+
+const CommandMenuEmpty = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, children = "No results found.", ...props }, ref) => (
+  <div
+    className={cn("py-6 text-center text-muted-foreground text-sm", className)}
+    ref={ref}
+    {...props}
+  >
+    {children}
+  </div>
+));
+CommandMenuEmpty.displayName = "CommandMenuEmpty";
+
+export const useCommandMenuShortcut = (callback: () => void) => {
+  React.useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        callback();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [callback]);
+};
+
+export {
+  CommandMenu,
+  CommandMenuTrigger,
+  CommandMenuContent,
+  CommandMenuTitle,
+  CommandMenuDescription,
+  CommandMenuInput,
+  CommandMenuList,
+  CommandMenuEmpty,
+  CommandMenuGroup,
+  CommandMenuItem,
+  CommandMenuSeparator,
+  CommandMenuClose,
+  CommandMenuProvider,
+  useCommandMenu,
+};

package/src/components/knowledge/editor/knowledge-doc-editor.tsx

@@ -139,7 +139,7 @@ function KnowledgeDocEditorBody({ document, editorWidth = 'auto', kbName, proper
       setDirty(false)
       setLastSavedAt(new Date())
     } catch (e) {
-      console.error('Auto-save failed:', e)
+      console.error('Auto-save failed:', e instanceof Error ? e.message : String(e))
     } finally {
       setSaving(false)
     }
@@ -176,7 +176,7 @@ function KnowledgeDocEditorBody({ document, editorWidth = 'auto', kbName, proper
       await saver(newTitle)
       onDocTitleChanged()
     } catch (e) {
-      console.error('Title update failed:', e)
+      console.error('Title update failed:', e instanceof Error ? e.message : String(e))
     }
   }, [onDocTitleChanged, saveHandlers])
 
@@ -186,7 +186,7 @@ function KnowledgeDocEditorBody({ document, editorWidth = 'auto', kbName, proper
       const saver = saveHandlers?.tags ?? ((t: string[]) => updateDocumentFn({ data: { id: docId.current, tags: t } }))
       await saver(newTags)
     } catch (e) {
-      console.error('Tags update failed:', e)
+      console.error('Tags update failed:', e instanceof Error ? e.message : String(e))
     }
   }, [saveHandlers])
 
@@ -198,7 +198,7 @@ function KnowledgeDocEditorBody({ document, editorWidth = 'auto', kbName, proper
     () => {
       if (saveHandlers?.properties && latestPropertyValues.current) {
         saveHandlers.properties(latestPropertyValues.current)
-          .catch((e) => console.error('Properties update failed:', e))
+          .catch((e) => console.error('Properties update failed:', e instanceof Error ? e.message : String(e)))
       }
     },
     { wait: EDITOR_AUTO_SAVE_MS },

package/src/components/knowledge/knowledge-settings-panel.tsx

@@ -66,7 +66,7 @@ export function KnowledgeSettingsPanel({ open, onOpenChange, kb, onUpdate }: Kno
       await updateKnowledgeFn({ data: { id: kb.id, visibility: v } })
       onUpdate?.()
     } catch (e) {
-      console.error('Update visibility failed:', e)
+      console.error('Update visibility failed:', e instanceof Error ? e.message : String(e))
     }
     setSaving(false)
   }
@@ -78,7 +78,7 @@ export function KnowledgeSettingsPanel({ open, onOpenChange, kb, onUpdate }: Kno
       onOpenChange(false)
       navigate({ to: '/knowledge' })
     } catch (e) {
-      console.error('Delete failed:', e)
+      console.error('Delete failed:', e instanceof Error ? e.message : String(e))
     }
     setDeleting(false)
   }

package/src/components/knowledge/knowledge-toolbar.tsx

@@ -127,7 +127,7 @@ export function KnowledgeToolbar({ kb, onUpdate, breadcrumb, docType, treeCollap
       await updateKnowledgeFn({ data: { id: kb.id, name: name.trim() } })
       onUpdate?.()
     } catch (e) {
-      console.error('Rename failed:', e)
+      console.error('Rename failed:', e instanceof Error ? e.message : String(e))
     }
     setEditingName(false)
   }
@@ -137,7 +137,7 @@ export function KnowledgeToolbar({ kb, onUpdate, breadcrumb, docType, treeCollap
     try {
       await updateKnowledgeFn({ data: { id: kb.id, tags } })
     } catch (e) {
-      console.error('Update tags failed:', e)
+      console.error('Update tags failed:', e instanceof Error ? e.message : String(e))
     }
   }
 
@@ -148,7 +148,7 @@ export function KnowledgeToolbar({ kb, onUpdate, breadcrumb, docType, treeCollap
       await updateKnowledgeFn({ data: { id: kb.id, visibility: value as 'private' | 'team' } })
       onUpdate?.()
     } catch (e) {
-      console.error('Update visibility failed:', e)
+      console.error('Update visibility failed:', e instanceof Error ? e.message : String(e))
     }
   }
 
@@ -161,7 +161,7 @@ export function KnowledgeToolbar({ kb, onUpdate, breadcrumb, docType, treeCollap
       window.dispatchEvent(new CustomEvent("knowledge-deleted"))
       navigate({ to: '/knowledge' })
     } catch (e) {
-      console.error('Delete failed:', e)
+      console.error('Delete failed:', e instanceof Error ? e.message : String(e))
     }
     setDeleting(false)
   }

package/src/components/knowledge/knowledge-tree-item.tsx

@@ -120,7 +120,7 @@ export function KnowledgeTreeItem({
       onRefresh()
       onDocRenamed?.(node.id)
     } catch (e) {
-      console.error('Rename failed:', e)
+      console.error('Rename failed:', e instanceof Error ? e.message : String(e))
     }
     finishEditing()
   }
@@ -134,7 +134,7 @@ export function KnowledgeTreeItem({
       setDeleteConfirm('')
       onRefresh()
     } catch (e) {
-      console.error('Delete failed:', e)
+      console.error('Delete failed:', e instanceof Error ? e.message : String(e))
     }
     setDeleting(false)
   }
@@ -156,7 +156,7 @@ export function KnowledgeTreeItem({
       onRefresh()
       onSelect(doc.id)
     } catch (e) {
-      console.error('Create child failed:', e)
+      console.error('Create child failed:', e instanceof Error ? e.message : String(e))
     }
     setCreatingChild(false)
   }

package/src/components/knowledge/knowledge-tree.tsx

@@ -107,7 +107,7 @@ export function KnowledgeTree({
       const docs = await listDocumentsFn({ data: { kbId } })
       setDocuments(docs as TreeNode[])
     } catch (e) {
-      console.error('Failed to fetch documents:', e)
+      console.error('Failed to fetch documents:', e instanceof Error ? e.message : String(e))
     } finally {
       setLoading(false)
     }
@@ -155,7 +155,7 @@ export function KnowledgeTree({
       await fetchDocuments()
       onSelect(doc.id)
     } catch (e) {
-      console.error('Create failed:', e)
+      console.error('Create failed:', e instanceof Error ? e.message : String(e))
     }
     setCreatingType(null)
   }

package/src/components/layout/sidebar-03/sidebar-search-trigger.tsx

@@ -16,11 +16,16 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { useTranslation } from "react-i18next"
-import { Search } from "lucide-react"
+import { Search, Command } from "lucide-react"
 import { useSidebar } from "@/components/ui/sidebar"
 import { cn } from "@/lib/utils"
 import { setCommandPaletteOpen } from "@/lib/commands/command-palette-state"
 
+const isMac =
+  typeof navigator !== "undefined" &&
+  (navigator.platform.toUpperCase().includes("MAC") ||
+    navigator.userAgent.toUpperCase().includes("MAC"))
+
 export function SidebarSearchTrigger() {
   const { t } = useTranslation("common")
   const { state } = useSidebar()
@@ -50,14 +55,23 @@ export function SidebarSearchTrigger() {
       )}
     >
       <Search className="size-4 shrink-0" />
-      <span className="flex-1 truncate text-left">
+      <span className="flex-1 truncate text-left text-xs">
         {t("command.searchPlaceholder")}
       </span>
-      <span className="inline-flex items-center gap-0.5">
-        <kbd className="rounded border border-border bg-muted/60 px-1 py-0.5 text-[10px] font-medium text-muted-foreground">
-          ⌘K
-        </kbd>
-      </span>
+        <span className="inline-flex items-center gap-1 rounded border border-border bg-muted/60 px-1.5 py-0.5">
+          <kbd
+            data-slot="kbd"
+            className="inline-flex items-center justify-center"
+          >
+            {isMac ? <Command size={10} /> : <span className="text-[10px] font-medium text-muted-foreground">Ctrl</span>}
+          </kbd>
+          <kbd
+            data-slot="kbd"
+            className="inline-flex items-center justify-center"
+          >
+            <span className="text-[11px] font-medium text-muted-foreground">K</span>
+          </kbd>
+        </span>
     </button>
   )
 }

package/src/components/settings/personal-team/account/account-client.tsx

@@ -67,7 +67,7 @@ export default function AccountClient({
         old ? { ...old, user: { ...old.user, avatarConfig: config, bgShape: shape, bgColor: color } } : old,
       )
     } catch (err) {
-      console.error("Failed to persist avatar:", err)
+      console.error("Failed to persist avatar:", err instanceof Error ? err.message : String(err))
       toast.error(t("profile.avatarSaveFailed"))
     }
   }, [queryClient])