@docyrus/ui-pro-ai-assistant 0.0.2 → 0.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docyrus/ui-pro-ai-assistant",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Docyrus AI Assistant component — full-featured chat UI with canvas, projects, and i18n support.",
   "type": "module",
   "main": "./dist/index.js",
@@ -23,8 +23,7 @@
     }
   },
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
   "dependencies": {
     "@ai-sdk/react": "3.0.110",

package/src/components/assistant-animations.tsx

@@ -1,29 +0,0 @@
-'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

@@ -1,235 +0,0 @@
-'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

@@ -1,278 +0,0 @@
-'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>
-  );
-}

package/src/components/create-agent-task.tsx

@@ -1,104 +0,0 @@
-'use client';
-
-import {
-  AlertTriangle,
-  CalendarClock,
-  Check,
-  Loader2
-} from 'lucide-react';
-
-import { cn } from '@docyrus/ui-pro-shared/lib/utils';
-
-interface CreateAgentTaskProps {
-  taskPrompt?: string;
-  taskDescription?: string;
-  scheduleType?: string;
-  state: string;
-  output?: any;
-}
-
-function truncateText(text: string, maxLength: number): string {
-  if (!text) return '';
-
-  return text.length > maxLength ? `${text.substring(0, maxLength)}...` : text;
-}
-
-export function CreateAgentTask({
-  taskPrompt,
-  taskDescription,
-  scheduleType,
-  state,
-  output
-}: CreateAgentTaskProps) {
-  const isSuccess = output?.status === 'success' || output?.result?.success;
-  const outputMessage: string | null = output ? (output.text || output.result?.message || null) : null;
-
-  const statusConfig = (() => {
-    if (state === 'output-available') {
-      if (isSuccess) {
-        return {
-          label: 'Created',
-          bgColor: 'bg-emerald-100',
-          textColor: 'text-emerald-700',
-          Icon: Check,
-          animate: false
-        };
-      }
-
-      return {
-        label: 'Failed',
-        bgColor: 'bg-rose-100',
-        textColor: 'text-rose-700',
-        Icon: AlertTriangle,
-        animate: false
-      };
-    }
-
-    return {
-      label: 'Creating...',
-      bgColor: 'bg-sky-100',
-      textColor: 'text-sky-700',
-      Icon: Loader2,
-      animate: true
-    };
-  })();
-
-  const {
-    label, bgColor, textColor, Icon, animate
-  } = statusConfig;
-
-  return (
-    <div className="rounded-lg border border-slate-200 bg-white p-4 hover:border-slate-300 transition-colors max-w-md">
-      <div className="flex items-start justify-between gap-4">
-        <div className="flex-grow min-w-0">
-          <div className="flex items-center gap-2 mb-1.5">
-            <span className={cn('inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium', bgColor, textColor)}>
-              <Icon className={cn('h-3 w-3', animate && 'animate-spin')} />
-              {label}
-            </span>
-            {scheduleType === 'scheduled' && (
-              <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-violet-100 text-violet-700">
-                <CalendarClock className="h-3 w-3" />
-                Scheduled
-              </span>
-            )}
-          </div>
-
-          <h3 className="font-medium text-slate-800 mb-1">
-            {taskDescription || truncateText(taskPrompt ?? '', 60)}
-          </h3>
-
-          {taskDescription && taskPrompt && (
-            <p className="text-sm text-slate-500 mb-2 line-clamp-2">{taskPrompt}</p>
-          )}
-
-          {outputMessage && state === 'output-available' && (
-            <div className={cn('mt-2 text-xs rounded-md px-3 py-2', isSuccess ? 'bg-emerald-50 text-emerald-700' : 'bg-rose-50 text-rose-700')}>
-              {outputMessage}
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/components/create-new-work-version.tsx

@@ -1,30 +0,0 @@
-'use client';
-
-import { FilePlus, Loader2 } from 'lucide-react';
-
-interface CreateNewWorkVersionProps {
-  title?: string;
-  description?: string;
-  state?: string;
-}
-
-export function CreateNewWorkVersion({ title, description, state }: CreateNewWorkVersionProps) {
-  return (
-    <div className="flex flex-row items-center space-x-4">
-      <div className="rounded-lg shadow-sm w-fit min-w-64 border bg-card p-3 flex items-center space-x-3">
-        <div className="flex-none p-2 bg-slate-50 rounded">
-          <FilePlus className="size-5" />
-        </div>
-        <div className="grow min-w-0">
-          <div className="font-medium text-sm truncate">{title || 'New Version'}</div>
-          {description && (
-            <p className="text-xs text-muted-foreground truncate">{description}</p>
-          )}
-        </div>
-      </div>
-      {state === 'input-streaming' && (
-        <Loader2 className="size-5 animate-spin text-primary" />
-      )}
-    </div>
-  );
-}