feat: enhance dialog and drawer components with new styles and functionality

- Updated Dialog component to support fullscreen mode and added a back button. - Introduced Drawer component for side navigation with customizable size and position. - Added DialogStyleContext for managing dialog style preferences including smart mode and drawer settings. - Implemented pending question service for managing persistent storage of pending questions. - Enhanced WebSocket handling to request pending questions upon frontend readiness. - Created dashboard launcher utility to manage the Dashboard server lifecycle.
2026-02-28 09:23:08 +08:00 · 2026-02-16 10:58:40 +08:00
parent 4f085242b5
commit 2e018520c3
8 changed files with 1100 additions and 46 deletions
--- a/ccw/frontend/src/components/ui/Dialog.tsx
+++ b/ccw/frontend/src/components/ui/Dialog.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { X } from "lucide-react";
+import { ArrowLeft, X } from "lucide-react";
 import { cn } from "@/lib/utils";

 const Dialog = DialogPrimitive.Root;
@@ -28,26 +28,51 @@ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;

 const DialogContent = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <DialogPortal>
-    <DialogOverlay />
-    <DialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-card p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        <X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
-    </DialogPrimitive.Content>
-  </DialogPortal>
-));
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
+    fullscreen?: boolean;
+  }
+>(({ className, children, fullscreen = false, ...props }, ref) => {
+  if (fullscreen) {
+    return (
+      <DialogPortal>
+        <DialogPrimitive.Content
+          ref={ref}
+          className={cn(
+            "fixed inset-0 z-50 flex flex-col bg-card duration-300 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+            className
+          )}
+          {...props}
+        >
+          {children}
+          <DialogPrimitive.Close className="absolute left-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+            <ArrowLeft className="h-5 w-5" />
+            <span className="sr-only">Back</span>
+          </DialogPrimitive.Close>
+        </DialogPrimitive.Content>
+      </DialogPortal>
+    );
+  }
+
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        ref={ref}
+        className={cn(
+          "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-card p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+          <X className="h-4 w-4" />
+          <span className="sr-only">Close</span>
+        </DialogPrimitive.Close>
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  );
+});
 DialogContent.displayName = DialogPrimitive.Content.displayName;

 const DialogHeader = ({
--- a/ccw/frontend/src/components/ui/Drawer.tsx
+++ b/ccw/frontend/src/components/ui/Drawer.tsx
@@ -0,0 +1,165 @@
+// ========================================
+// Drawer Component
+// ========================================
+// Side drawer for A2UI surfaces with slide animation
+// Supports left/right positioning and multiple sizes
+
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { X } from 'lucide-react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+
+// ========== Variants ==========
+
+const drawerVariants = cva(
+  'fixed z-50 gap-4 bg-card p-6 shadow-lg border-border ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+  {
+    variants: {
+      side: {
+        left: 'inset-y-0 left-0 h-full border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left',
+        right: 'inset-y-0 right-0 h-full border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right',
+      },
+      size: {
+        sm: 'w-80',
+        md: 'w-96',
+        lg: 'w-[540px]',
+        xl: 'w-[720px]',
+        full: 'w-full',
+      },
+    },
+    defaultVariants: {
+      side: 'right',
+      size: 'md',
+    },
+  }
+);
+
+// ========== Root Components ==========
+
+const Drawer = DialogPrimitive.Root;
+const DrawerTrigger = DialogPrimitive.Trigger;
+const DrawerClose = DialogPrimitive.Close;
+const DrawerPortal = DialogPrimitive.Portal;
+
+// ========== Overlay ==========
+
+const DrawerOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      className
+    )}
+    {...props}
+  />
+));
+DrawerOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+// ========== Content ==========
+
+interface DrawerContentProps
+  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>,
+    VariantProps<typeof drawerVariants> {
+  /** Whether to show the close button */
+  showClose?: boolean;
+  /** Whether clicking outside should close the drawer */
+  closeOnOutsideClick?: boolean;
+}
+
+const DrawerContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  DrawerContentProps
+>(
+  (
+    { side = 'right', size = 'md', showClose = true, closeOnOutsideClick = true, className, children, ...props },
+    ref
+  ) => (
+    <DrawerPortal>
+      <DrawerOverlay />
+      <DialogPrimitive.Content
+        ref={ref}
+        className={cn(drawerVariants({ side, size }), className)}
+        onInteractOutside={(e) => {
+          if (!closeOnOutsideClick) {
+            e.preventDefault();
+          }
+        }}
+        {...props}
+      >
+        {showClose && (
+          <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+            <X className="h-4 w-4" />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+        {children}
+      </DialogPrimitive.Content>
+    </DrawerPortal>
+  )
+);
+DrawerContent.displayName = DialogPrimitive.Content.displayName;
+
+// ========== Header ==========
+
+const DrawerHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('flex flex-col space-y-2 text-center sm:text-left', className)} {...props} />
+);
+DrawerHeader.displayName = 'DrawerHeader';
+
+// ========== Footer ==========
+
+const DrawerFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
+    {...props}
+  />
+);
+DrawerFooter.displayName = 'DrawerFooter';
+
+// ========== Title ==========
+
+const DrawerTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn('text-lg font-semibold leading-none tracking-tight', className)}
+    {...props}
+  />
+));
+DrawerTitle.displayName = DialogPrimitive.Title.displayName;
+
+// ========== Description ==========
+
+const DrawerDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+));
+DrawerDescription.displayName = DialogPrimitive.Description.displayName;
+
+// ========== Exports ==========
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+  type DrawerContentProps,
+};
--- a/ccw/frontend/src/contexts/DialogStyleContext.tsx
+++ b/ccw/frontend/src/contexts/DialogStyleContext.tsx
@@ -0,0 +1,166 @@
+// ========================================
+// DialogStyleContext
+// ========================================
+// Context provider for A2UI dialog style preferences
+// Supports modal, drawer, sheet, and fullscreen modes
+
+import { createContext, useContext, useCallback, useMemo } from 'react';
+import { useConfigStore } from '@/stores/configStore';
+
+// ========== Types ==========
+
+export type DialogStyle = 'modal' | 'drawer' | 'sheet' | 'fullscreen';
+
+export interface A2UIPreferences {
+  /** Default dialog style */
+  dialogStyle: DialogStyle;
+  /** Enable smart mode - auto-select style based on question type */
+  smartModeEnabled: boolean;
+  /** Auto-selection countdown duration in seconds */
+  autoSelectionDuration: number;
+  /** Enable sound notification before auto-submit */
+  autoSelectionSoundEnabled: boolean;
+  /** Pause countdown on user interaction */
+  pauseOnInteraction: boolean;
+  /** Show A2UI quick action button in toolbar */
+  showA2UIButtonInToolbar: boolean;
+  /** Drawer side preference */
+  drawerSide: 'left' | 'right';
+  /** Drawer size preference */
+  drawerSize: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+}
+
+export interface DialogStyleContextValue {
+  /** Current preferences */
+  preferences: A2UIPreferences;
+  /** Update a preference */
+  updatePreference: <K extends keyof A2UIPreferences>(
+    key: K,
+    value: A2UIPreferences[K]
+  ) => void;
+  /** Reset to defaults */
+  resetPreferences: () => void;
+  /** Get recommended style for a question type */
+  getRecommendedStyle: (questionType: string) => DialogStyle;
+}
+
+// ========== Constants ==========
+
+export const DEFAULT_A2UI_PREFERENCES: A2UIPreferences = {
+  dialogStyle: 'modal',
+  smartModeEnabled: true,
+  autoSelectionDuration: 30,
+  autoSelectionSoundEnabled: false,
+  pauseOnInteraction: true,
+  showA2UIButtonInToolbar: true,
+  drawerSide: 'right',
+  drawerSize: 'md',
+};
+
+/** Style recommendations based on question type */
+const STYLE_RECOMMENDATIONS: Record<string, DialogStyle> = {
+  confirm: 'modal',
+  select: 'modal',
+  'multi-select': 'drawer',
+  input: 'modal',
+  'multi-question': 'drawer',
+  form: 'drawer',
+  wizard: 'fullscreen',
+  complex: 'drawer',
+};
+
+// ========== Context ==========
+
+const DialogStyleContext = createContext<DialogStyleContextValue | null>(null);
+
+// ========== Provider ==========
+
+interface DialogStyleProviderProps {
+  children: React.ReactNode;
+}
+
+export function DialogStyleProvider({ children }: DialogStyleProviderProps) {
+  // Get preferences from config store
+  const a2uiPreferences = useConfigStore((state) => state.a2uiPreferences);
+  const setA2uiPreferences = useConfigStore((state) => state.setA2uiPreferences);
+
+  // Ensure we have default values
+  const preferences: A2UIPreferences = useMemo(
+    () => ({
+      ...DEFAULT_A2UI_PREFERENCES,
+      ...a2uiPreferences,
+    }),
+    [a2uiPreferences]
+  );
+
+  // Update a single preference
+  const updatePreference = useCallback(
+    <K extends keyof A2UIPreferences>(key: K, value: A2UIPreferences[K]) => {
+      setA2uiPreferences({
+        ...preferences,
+        [key]: value,
+      });
+    },
+    [preferences, setA2uiPreferences]
+  );
+
+  // Reset to defaults
+  const resetPreferences = useCallback(() => {
+    setA2uiPreferences(DEFAULT_A2UI_PREFERENCES);
+  }, [setA2uiPreferences]);
+
+  // Get recommended style based on question type
+  const getRecommendedStyle = useCallback(
+    (questionType: string): DialogStyle => {
+      if (!preferences.smartModeEnabled) {
+        return preferences.dialogStyle;
+      }
+      return STYLE_RECOMMENDATIONS[questionType] || preferences.dialogStyle;
+    },
+    [preferences]
+  );
+
+  const value = useMemo(
+    () => ({
+      preferences,
+      updatePreference,
+      resetPreferences,
+      getRecommendedStyle,
+    }),
+    [preferences, updatePreference, resetPreferences, getRecommendedStyle]
+  );
+
+  return (
+    <DialogStyleContext.Provider value={value}>
+      {children}
+    </DialogStyleContext.Provider>
+  );
+}
+
+// ========== Hook ==========
+
+export function useDialogStyleContext(): DialogStyleContextValue {
+  const context = useContext(DialogStyleContext);
+  if (!context) {
+    throw new Error('useDialogStyleContext must be used within a DialogStyleProvider');
+  }
+  return context;
+}
+
+// Convenience hook for just getting the current style
+export function useDialogStyle(): {
+  style: DialogStyle;
+  preferences: A2UIPreferences;
+  getRecommendedStyle: (questionType: string) => DialogStyle;
+} {
+  const { preferences, getRecommendedStyle } = useDialogStyleContext();
+  return {
+    style: preferences.dialogStyle,
+    preferences,
+    getRecommendedStyle,
+  };
+}
+
+// ========== Exports ==========
+
+export { DialogStyleContext };
--- a/ccw/frontend/src/hooks/useWebSocket.ts
+++ b/ccw/frontend/src/hooks/useWebSocket.ts
@@ -440,6 +440,12 @@ export function useWebSocket(options: UseWebSocketOptions = {}): UseWebSocketRet
        s.setWsStatus('connected');
        s.resetReconnectAttempts();
        reconnectDelayRef.current = RECONNECT_DELAY_BASE;
+
+        // Request any pending questions from backend
+        ws.send(JSON.stringify({
+          type: 'FRONTEND_READY',
+          payload: { action: 'requestPendingQuestions' }
+        }));
      };

      ws.onmessage = handleMessage;