@docyrus/ui-pro-ai-assistant 0.0.1

package/package.json

@@ -0,0 +1,155 @@
+{
+  "name": "@docyrus/ui-pro-ai-assistant",
+  "version": "0.0.1",
+  "description": "Docyrus AI Assistant component — full-featured chat UI with canvas, projects, and i18n support.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./src/index.ts",
+        "default": "./dist/index.js"
+      }
+    },
+    "./vite": "./src/vite.ts"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "dependencies": {
+    "@ai-sdk/react": "3.0.110",
+    "@codesandbox/sandpack-react": "2.20.0",
+    "@lottiefiles/dotlottie-react": "0.18.3",
+    "@visactor/vchart": "2.0.17",
+    "@visactor/vtable": "1.23.2",
+    "@visactor/vtable-plugins": "1.23.2",
+    "ai": "6.0.108",
+    "lucide-react": "0.576.0",
+    "mermaid": "11.12.3",
+    "recharts": "2.15.4",
+    "sonner": "2.0.7",
+    "@ariakit/react": "0.4.21",
+    "@emoji-mart/data": "1.2.1",
+    "@platejs/ai": "52.3.1",
+    "@platejs/autoformat": "52.0.11",
+    "@platejs/basic-nodes": "52.0.11",
+    "@platejs/basic-styles": "52.0.11",
+    "@platejs/callout": "52.0.11",
+    "@platejs/caption": "52.0.11",
+    "@platejs/code-block": "52.0.11",
+    "@platejs/combobox": "52.0.15",
+    "@platejs/comment": "52.0.11",
+    "@platejs/date": "52.0.11",
+    "@platejs/diff": "52.0.11",
+    "@platejs/dnd": "52.0.11",
+    "@platejs/docx": "52.0.11",
+    "@platejs/docx-io": "52.2.0",
+    "@platejs/emoji": "52.0.15",
+    "@platejs/floating": "52.0.11",
+    "@platejs/indent": "52.0.11",
+    "@platejs/juice": "52.0.11",
+    "@platejs/layout": "52.0.11",
+    "@platejs/link": "52.0.11",
+    "@platejs/list": "52.0.11",
+    "@platejs/markdown": "52.3.1",
+    "@platejs/math": "52.0.11",
+    "@platejs/media": "52.0.11",
+    "@platejs/mention": "52.0.15",
+    "@platejs/resizable": "52.0.11",
+    "@platejs/selection": "52.0.16",
+    "@platejs/slash-command": "52.0.15",
+    "@platejs/suggestion": "52.0.11",
+    "@platejs/table": "52.0.11",
+    "@platejs/toc": "52.0.11",
+    "@platejs/toggle": "52.0.11",
+    "class-variance-authority": "0.7.1",
+    "cmdk": "1.1.1",
+    "date-fns": "4.1.0",
+    "html2canvas-pro": "1.6.7",
+    "jotai-x": "2.3.3",
+    "lowlight": "3.3.0",
+    "pdf-lib": "1.17.1",
+    "platejs": "^52.3.2",
+    "radix-ui": "1.4.3",
+    "react-day-picker": "9.14.0",
+    "react-dnd": "16.0.1",
+    "react-dnd-html5-backend": "16.0.1",
+    "react-lite-youtube-embed": "3.5.1",
+    "react-player": "3.4.0",
+    "remark-gfm": "4.0.1",
+    "remark-math": "6.0.0",
+    "scroll-into-view-if-needed": "3.1.0",
+    "use-file-picker": "2.1.4",
+    "use-stick-to-bottom": "1.1.3",
+    "vaul": "1.1.2",
+    "@univerjs/core": "0.16.1",
+    "@univerjs/design": "0.16.1",
+    "@univerjs/docs": "0.16.1",
+    "@univerjs/docs-ui": "0.16.1",
+    "@univerjs/drawing": "0.16.1",
+    "@univerjs/drawing-ui": "0.16.1",
+    "@univerjs/engine-formula": "0.16.1",
+    "@univerjs/engine-render": "0.16.1",
+    "@univerjs/find-replace": "0.16.1",
+    "@univerjs/sheets": "0.16.1",
+    "@univerjs/sheets-conditional-formatting": "0.16.1",
+    "@univerjs/sheets-conditional-formatting-ui": "0.16.1",
+    "@univerjs/sheets-crosshair-highlight": "0.16.1",
+    "@univerjs/sheets-data-validation": "0.16.1",
+    "@univerjs/sheets-data-validation-ui": "0.16.1",
+    "@univerjs/sheets-drawing": "0.16.1",
+    "@univerjs/sheets-drawing-ui": "0.16.1",
+    "@univerjs/sheets-filter": "0.16.1",
+    "@univerjs/sheets-filter-ui": "0.16.1",
+    "@univerjs/sheets-find-replace": "0.16.1",
+    "@univerjs/sheets-formula": "0.16.1",
+    "@univerjs/sheets-formula-ui": "0.16.1",
+    "@univerjs/sheets-hyper-link": "0.16.1",
+    "@univerjs/sheets-hyper-link-ui": "0.16.1",
+    "@univerjs/sheets-numfmt": "0.16.1",
+    "@univerjs/sheets-numfmt-ui": "0.16.1",
+    "@univerjs/sheets-sort": "0.16.1",
+    "@univerjs/sheets-sort-ui": "0.16.1",
+    "@univerjs/sheets-thread-comment": "0.16.1",
+    "@univerjs/sheets-thread-comment-ui": "0.16.1",
+    "@univerjs/sheets-ui": "0.16.1",
+    "@univerjs/thread-comment": "0.16.1",
+    "@univerjs/thread-comment-ui": "0.16.1",
+    "@univerjs/ui": "0.16.1",
+    "@univerjs/watermark": "0.16.1",
+    "xlsx": "0.18.5"
+  },
+  "devDependencies": {
+    "@types/react": "19.2.14",
+    "@types/react-dom": "19.2.3",
+    "tsup": "8.5.1",
+    "typescript": "5.9.3",
+    "@types/node": "25.3.3",
+    "@docyrus/ui-pro-shared": "0.0.1"
+  },
+  "peerDependencies": {
+    "@docyrus/api-client": ">=0.1.0",
+    "@docyrus/ui-pro-shared": ">=0.0.1",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "vite": ">=5.0.0"
+  },
+  "peerDependenciesMeta": {
+    "vite": {
+      "optional": true
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src/"
+  }
+}

package/src/components/assistant-animations.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import { DotLottieReact } from '@lottiefiles/dotlottie-react';
+
+const ANIMATIONS = {
+  opening: '/lottie/docy/opening.lottie',
+  thinking: '/lottie/docy/thinking.lottie',
+  working: '/lottie/docy/working.lottie'
+} as const;
+
+type AnimationType = keyof typeof ANIMATIONS;
+
+interface AssistantAnimationsProps {
+  animationType?: AnimationType;
+  className?: string;
+}
+
+export function AssistantAnimations({
+  animationType = 'thinking',
+  className
+}: AssistantAnimationsProps) {
+  return (
+    <DotLottieReact
+      src={ANIMATIONS[animationType]}
+      autoplay
+      loop={animationType !== 'opening'}
+      className={className} />
+  );
+}

package/src/components/assistant-dialogs.tsx

@@ -0,0 +1,235 @@
+'use client';
+
+import { Button } from '@docyrus/ui-pro-shared/components/button';
+import {
+  Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle
+} from '@docyrus/ui-pro-shared/components/dialog';
+import { Input } from '@docyrus/ui-pro-shared/components/input';
+import { Textarea } from '@docyrus/ui-pro-shared/components/textarea';
+
+import { type ProjectState } from '../hooks/use-project-state';
+
+import { type SessionState } from '../hooks/use-session-state';
+
+interface AssistantDialogsProps {
+  // Project state
+  projectState: ProjectState;
+  projectActions: {
+    startEditing: () => void;
+    stopEditing: () => void;
+    setName: (name: string) => void;
+    setDescription: (description: string) => void;
+    setDeleteDialogOpen: (open: boolean) => void;
+    startEditingInstructions: () => void;
+    stopEditingInstructions: () => void;
+    setInstructions: (instructions: string) => void;
+  };
+
+  // Session state
+  sessionState: SessionState;
+  sessionActions: {
+    startEditing: () => void;
+    stopEditing: () => void;
+    setName: (name: string) => void;
+    setDeleteDialogOpen: (open: boolean) => void;
+  };
+
+  // Actions
+  onUpdateProject: () => Promise<void>;
+  onDeleteProject: () => Promise<void>;
+  onUpdateSession: () => Promise<void>;
+  onDeleteSession: () => Promise<void>;
+  onUpdateProjectInstructions: () => Promise<void>;
+
+  // i18n
+  t: (key: string) => string;
+}
+
+export function AssistantDialogs({
+  projectState,
+  projectActions,
+  sessionState,
+  sessionActions,
+  onUpdateProject,
+  onDeleteProject,
+  onUpdateSession,
+  onDeleteSession,
+  onUpdateProjectInstructions,
+  t
+}: AssistantDialogsProps) {
+  return (
+    <>
+      {/* Edit Project Dialog */}
+      <Dialog
+        open={projectState.isEditing}
+        onOpenChange={open => (open ? projectActions.startEditing() : projectActions.stopEditing())}>
+        <DialogContent className="sm:max-w-md z-[200]">
+          <DialogHeader>
+            <DialogTitle>{t('dialogs.edit_project')}</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-4 py-4">
+            <div className="space-y-2">
+              <label htmlFor="project-name" className="text-sm font-medium leading-none">
+                {t('labels.project_name')}
+              </label>
+              <Input
+                id="project-name"
+                value={projectState.name}
+                onChange={e => projectActions.setName(e.target.value)}
+                placeholder={t('placeholders.enter_project_name')} />
+            </div>
+            <div className="space-y-2">
+              <label htmlFor="project-description" className="text-sm font-medium leading-none">
+                {t('labels.description')}
+              </label>
+              <Textarea
+                className="resize-none"
+                id="project-description"
+                value={projectState.description}
+                onChange={e => projectActions.setDescription(e.target.value)}
+                placeholder={t('placeholders.enter_project_description')}
+                rows={3} />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button className="cursor-pointer" variant="outline" onClick={() => projectActions.stopEditing()}>
+              {t('buttons.cancel')}
+            </Button>
+            <Button
+              className="bg-primary text-primary-foreground hover:bg-primary/90 cursor-pointer"
+              onClick={onUpdateProject}
+              disabled={projectState.isSaving || !projectState.name.trim()}>
+              {projectState.isSaving ? t('buttons.saving') : t('buttons.save_changes')}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Delete Project Dialog */}
+      <Dialog open={projectState.isDeleteDialogOpen} onOpenChange={projectActions.setDeleteDialogOpen}>
+        <DialogContent className="sm:max-w-md z-[200]">
+          <DialogHeader>
+            <DialogTitle>{t('dialogs.delete_project')}</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-4 py-4">
+            <p>{t('messages.delete_project_confirm')}</p>
+          </div>
+          <DialogFooter>
+            <Button
+              className="cursor-pointer"
+              variant="outline"
+              onClick={() => projectActions.setDeleteDialogOpen(false)}>
+              {t('buttons.cancel')}
+            </Button>
+            <Button
+              className="bg-primary text-primary-foreground hover:bg-primary/90 cursor-pointer"
+              onClick={onDeleteProject}
+              disabled={projectState.isDeleting}>
+              {projectState.isDeleting ? t('buttons.deleting') : t('buttons.delete_project')}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Edit Session Dialog */}
+      <Dialog
+        open={sessionState.isEditing}
+        onOpenChange={open => (open ? sessionActions.startEditing() : sessionActions.stopEditing())}>
+        <DialogContent className="sm:max-w-md z-[200]">
+          <DialogHeader>
+            <DialogTitle>{t('dialogs.rename_session')}</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-4 py-4">
+            <div className="space-y-2">
+              <label htmlFor="session-name" className="text-sm font-medium leading-none">
+                {t('labels.session_name')}
+              </label>
+              <Input
+                id="session-name"
+                value={sessionState.name}
+                onChange={e => sessionActions.setName(e.target.value)}
+                placeholder={t('placeholders.enter_session_name')} />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button className="cursor-pointer" variant="outline" onClick={() => sessionActions.stopEditing()}>
+              {t('buttons.cancel')}
+            </Button>
+            <Button
+              className="bg-primary text-primary-foreground hover:bg-primary/90 cursor-pointer"
+              onClick={onUpdateSession}
+              disabled={sessionState.isSaving || !sessionState.name.trim()}>
+              {sessionState.isSaving ? t('buttons.saving') : t('buttons.save_changes')}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Delete Session Dialog */}
+      <Dialog open={sessionState.isDeleteDialogOpen} onOpenChange={sessionActions.setDeleteDialogOpen}>
+        <DialogContent className="sm:max-w-md z-[200]">
+          <DialogHeader>
+            <DialogTitle>{t('dialogs.delete_session')}</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-4 py-4">
+            <p>{t('messages.delete_session_confirm')}</p>
+          </div>
+          <DialogFooter>
+            <Button
+              className="cursor-pointer"
+              variant="outline"
+              onClick={() => sessionActions.setDeleteDialogOpen(false)}>
+              {t('buttons.cancel')}
+            </Button>
+            <Button
+              className="bg-primary text-primary-foreground hover:bg-primary/90 cursor-pointer"
+              onClick={onDeleteSession}
+              disabled={sessionState.isDeleting}>
+              {sessionState.isDeleting ? t('buttons.deleting') : t('buttons.delete_session')}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Edit Project Instructions Dialog */}
+      <Dialog
+        open={projectState.isEditingInstructions}
+        onOpenChange={open => open ? projectActions.startEditingInstructions() : projectActions.stopEditingInstructions()}>
+        <DialogContent className="sm:max-w-lg z-[200]">
+          <DialogHeader>
+            <DialogTitle>{t('dialogs.edit_instructions')}</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-4 py-4">
+            <div className="space-y-2">
+              <label htmlFor="project-instructions" className="text-sm font-medium leading-none">
+                {t('sections.instructions')}
+              </label>
+              <Textarea
+                id="project-instructions"
+                value={projectState.instructions}
+                onChange={e => projectActions.setInstructions(e.target.value)}
+                placeholder={t('placeholders.add_instructions')}
+                className="min-h-30 resize-none"
+                rows={6} />
+              <p className="text-xs text-muted-foreground">{t('descriptions.instructions_help')}</p>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button
+              className="cursor-pointer"
+              variant="outline"
+              onClick={() => projectActions.stopEditingInstructions()}>
+              {t('buttons.cancel')}
+            </Button>
+            <Button
+              className="bg-primary text-primary-foreground hover:bg-primary/90 cursor-pointer"
+              onClick={onUpdateProjectInstructions}
+              disabled={projectState.isSavingInstructions}>
+              {projectState.isSavingInstructions ? t('buttons.saving') : t('buttons.save_instructions')}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

package/src/components/code-view.tsx

@@ -0,0 +1,278 @@
+'use client';
+
+import {
+  Component,
+  type ErrorInfo,
+  type ReactNode,
+  useMemo
+} from 'react';
+
+import {
+  SandpackCodeEditor,
+  type SandpackFiles,
+  SandpackPreview,
+  SandpackProvider,
+  type SandpackPredefinedTemplate
+} from '@codesandbox/sandpack-react';
+import {
+  Sandbox,
+  SandboxContent,
+  SandboxTabContent,
+  SandboxTabs,
+  SandboxTabsBar,
+  SandboxTabsList,
+  SandboxTabsTrigger
+} from '@docyrus/ui-pro-shared/ai-elements/sandbox';
+import { Loader2 } from 'lucide-react';
+
+import { useAssistantTranslation } from '../i18n';
+
+type ToolState
+  = 'input-available'
+    | 'input-streaming'
+    | 'output-available'
+    | 'output-error'
+    | 'approval-requested'
+    | 'approval-responded'
+    | 'output-denied';
+
+type SandpackLanguage
+  = 'react-ts'
+    | 'react'
+    | 'vanilla-ts'
+    | 'vanilla'
+    | 'vue'
+    | 'svelte'
+    | 'static';
+
+export interface CodeViewFile {
+  path: string;
+  content: string;
+  active?: boolean;
+}
+
+export interface CodeViewInput {
+  title?: string;
+  description?: string;
+  language?: SandpackLanguage;
+  files?: CodeViewFile[];
+  code?: string;
+  entryFile?: string;
+}
+
+export interface CodeViewPart {
+  state: ToolState;
+  input?: CodeViewInput;
+  output?: {
+    id?: string;
+    files?: CodeViewFile[];
+  };
+  toolCallId: string;
+}
+
+export interface CodeViewProps {
+  part: CodeViewPart;
+  codeOnly?: boolean;
+}
+
+function buildSandpackFiles(
+  files?: CodeViewFile[],
+  code?: string,
+  language?: SandpackLanguage
+): SandpackFiles {
+  // If files array is provided, use it directly
+  if (files && files.length > 0) {
+    return files.reduce<SandpackFiles>((acc, file) => {
+      acc[file.path] = { code: file.content, active: file.active };
+
+      return acc;
+    }, {});
+  }
+
+  // Fallback to single code content
+  if (!code) {
+    return {
+      '/App.tsx': {
+        code: 'export default function App() {\n  return <h1>No content</h1>\n}',
+        active: true
+      }
+    };
+  }
+
+  // Build files based on language
+  switch (language) {
+    case 'react':
+      return {
+        '/App.js': { code, active: true }
+      };
+
+    case 'vanilla-ts':
+      return {
+        '/index.ts': { code, active: true }
+      };
+
+    case 'vanilla':
+      return {
+        '/index.js': { code, active: true }
+      };
+
+    case 'static':
+      return {
+        '/index.html': { code, active: true }
+      };
+
+    case 'react-ts':
+
+    default:
+      return {
+        '/App.tsx': { code, active: true }
+      };
+  }
+}
+
+function getTemplate(language?: SandpackLanguage): SandpackPredefinedTemplate {
+  switch (language) {
+    case 'react':
+      return 'react';
+
+    case 'vanilla-ts':
+      return 'vanilla-ts';
+
+    case 'vanilla':
+      return 'vanilla';
+
+    case 'vue':
+      return 'vue';
+
+    case 'svelte':
+      return 'svelte';
+
+    case 'static':
+      return 'static';
+
+    case 'react-ts':
+
+    default:
+      return 'react-ts';
+  }
+}
+
+class SandpackErrorBoundary extends Component<
+  { children: ReactNode },
+  { error: string | null }
+> {
+  constructor(props: { children: ReactNode }) {
+    super(props);
+    this.state = { error: null };
+  }
+
+  static getDerivedStateFromError(error: unknown) {
+    const message = error instanceof Error ? error.message : String(error);
+
+    return { error: message };
+  }
+
+  componentDidCatch(_error: unknown, _info: ErrorInfo) {
+    // silently caught
+  }
+
+  render() {
+    if (this.state.error) {
+      return (
+        <div className="flex items-center justify-center p-8 text-sm text-destructive">
+          Preview unavailable: {this.state.error}
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export function CodeView({ part, codeOnly = false }: CodeViewProps) {
+  const { t } = useAssistantTranslation();
+  const { state, input, output } = part;
+
+  // Use output files if available (after processing), otherwise input
+  const files = useMemo(
+    () => buildSandpackFiles(
+      output?.files ?? input?.files,
+      input?.code,
+      input?.language
+    ),
+    [
+      output?.files,
+      input?.files,
+      input?.code,
+      input?.language
+    ]
+  );
+
+  const template = getTemplate(input?.language);
+  const isLoading = state === 'input-streaming';
+
+  return (
+    <Sandbox>
+      <SandboxContent>
+        {isLoading ? (
+          <div className="flex items-center justify-center p-8 text-muted-foreground">
+            <Loader2 className="size-5 animate-spin mr-2" />
+            <span>{t('code_view.generating')}</span>
+          </div>
+        ) : (
+          <SandpackProvider
+            key={part.toolCallId}
+            template={template}
+            files={files}
+            theme="light"
+            options={{
+              externalResources: ['https://cdn.tailwindcss.com'],
+              bundlerTimeOut: 60000,
+              recompileMode: 'delayed',
+              recompileDelay: 500
+            }}
+            customSetup={(template === 'react-ts' || template === 'react') ? {
+              dependencies: {
+                '@docyrus/addin-client': '^0.0.8',
+                '@hugeicons/react': '^1.1.4',
+                '@hugeicons/core-free-icons': '^3.1.1',
+                'date-fns': '^4.1.0',
+                numbro: '^2.5.0',
+                '@docyrus/shadcn': '^0.1.0',
+                'class-variance-authority': '^0.7.1',
+                'tailwind-merge': '^3.4.0',
+                'tailwindcss-animate': '^1.0.7',
+                'tw-animate-css': '^1.4.0',
+                'lucide-react': '^0.275.0',
+                recharts: '^3.5.1',
+                'react-is': '^19.2.1'
+              }
+            } : undefined}>
+            {codeOnly ? (
+              <SandpackCodeEditor showTabs showLineNumbers showInlineErrors className="min-h-[400px]" />
+            ) : (
+              <SandboxTabs defaultValue="code">
+                <SandboxTabsBar>
+                  <SandboxTabsList>
+                    <SandboxTabsTrigger value="code">{t('tabs.code')}</SandboxTabsTrigger>
+                    <SandboxTabsTrigger value="preview">{t('tabs.preview')}</SandboxTabsTrigger>
+                  </SandboxTabsList>
+                </SandboxTabsBar>
+
+                <SandboxTabContent value="code">
+                  <SandpackCodeEditor showTabs showLineNumbers showInlineErrors className="min-h-[400px]" />
+                </SandboxTabContent>
+
+                <SandboxTabContent value="preview">
+                  <SandpackErrorBoundary>
+                    <SandpackPreview showNavigator={false} showRefreshButton className="min-h-[400px]" />
+                  </SandpackErrorBoundary>
+                </SandboxTabContent>
+              </SandboxTabs>
+            )}
+          </SandpackProvider>
+        )}
+      </SandboxContent>
+    </Sandbox>
+  );
+}