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

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>
-  );
-}

package/src/components/extract-web.tsx

@@ -1,160 +0,0 @@
-'use client';
-
-import { useEffect, useRef, useState } from 'react';
-
-import { CheckCircle, Globe, Loader2 } from 'lucide-react';
-
-import { Card } from '@docyrus/ui-pro-shared/components/card';
-
-import { useApiClient } from '../lib/api-client';
-
-interface ExtractWebProps {
-  title?: string;
-  status?: string;
-  state?: string;
-  runId?: string;
-  onOpen?: () => void;
-}
-
-const TERMINAL_STATUSES = [
-  'completed',
-  'failed',
-  'error',
-  'success'
-];
-
-export function ExtractWeb({
-  title,
-  status: initialStatus,
-  state,
-  runId,
-  onOpen
-}: ExtractWebProps) {
-  const [currentStatus, setCurrentStatus] = useState(initialStatus || '');
-  const [pollingFailed, setPollingFailed] = useState(false);
-  const apiClient = useApiClient();
-  const isPollingRef = useRef(false);
-  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const unmountedRef = useRef(false);
-  const currentStatusRef = useRef(initialStatus || '');
-
-  const capitalizedStatus = currentStatus ? currentStatus.charAt(0).toUpperCase() + currentStatus.slice(1) : 'Processing';
-
-  const isCompleted = currentStatus === 'completed' || currentStatus === 'success';
-  const isSpinning = !isCompleted && !pollingFailed;
-
-  const handleClick = () => {
-    if (state === 'output-available') {
-      onOpen?.();
-    }
-  };
-
-  const stopPolling = () => {
-    isPollingRef.current = false;
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-      timeoutRef.current = null;
-    }
-  };
-
-  const poll = async () => {
-    if (!runId || isPollingRef.current || unmountedRef.current) return;
-    if (TERMINAL_STATUSES.includes(currentStatusRef.current)) return;
-
-    isPollingRef.current = true;
-
-    try {
-      const data = await apiClient.get(`ai/external-task-jobs/${runId}/check`);
-
-      if (unmountedRef.current) return;
-
-      const responseData = (data.data as any) || data;
-      const status = responseData?.status as string | undefined;
-
-      if (status) {
-        currentStatusRef.current = status;
-        setCurrentStatus(status);
-      }
-
-      isPollingRef.current = false;
-
-      if (!status || TERMINAL_STATUSES.includes(status)) {
-        return;
-      }
-
-      timeoutRef.current = setTimeout(() => {
-        void poll();
-      }, 20000);
-    } catch (error) {
-      if (!unmountedRef.current) {
-        console.error('ExtractWeb: polling error, stopping:', error);
-        setPollingFailed(true);
-      }
-      isPollingRef.current = false;
-    }
-  };
-
-  useEffect(() => {
-    const status = initialStatus || '';
-
-    currentStatusRef.current = status;
-    setCurrentStatus(status);
-
-    if (TERMINAL_STATUSES.includes(status)) {
-      stopPolling();
-    }
-  }, [initialStatus]);
-
-  useEffect(() => {
-    unmountedRef.current = false;
-    setPollingFailed(false);
-
-    if (runId && !TERMINAL_STATUSES.includes(currentStatusRef.current)) {
-      void poll();
-    }
-
-    return () => {
-      unmountedRef.current = true;
-      stopPolling();
-    };
-    // poll uses refs internally, safe to omit
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [runId]);
-
-  return (
-    <div className="flex flex-row items-center space-x-4">
-      <Card
-        className="p-4 w-fit min-w-96 max-w-96 shadow-sm flex flex-col space-y-2 cursor-pointer hover:bg-accent/50 transition-colors"
-        onClick={handleClick}>
-        <div className="flex items-start space-x-2">
-          <div className="flex-none p-2 bg-slate-50 rounded">
-            <Globe className="size-8 text-muted-foreground" />
-          </div>
-          <div className="grow space-y-1 min-w-0">
-            <div className="font-medium text-base truncate">{title || 'Web Extraction'}</div>
-            {isCompleted ? (
-              <div className="flex items-center gap-2">
-                <span className="inline-flex items-center gap-1.5 px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-700">
-                  <CheckCircle className="size-3" />
-                  {capitalizedStatus}
-                </span>
-              </div>
-            ) : (
-              <div>
-                <span className="inline-flex items-center gap-1.5 px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-700">
-                  {isSpinning && <Loader2 className="size-3 animate-spin" />}
-                  {capitalizedStatus}{isSpinning ? '...' : ''}
-                </span>
-                {isSpinning && (
-                  <p className="text-sm text-muted-foreground mt-1">
-                    This process may take some time. You will receive a notification once it is complete.
-                  </p>
-                )}
-              </div>
-            )}
-          </div>
-        </div>
-      </Card>
-    </div>
-  );
-}

package/src/components/forward-to-agent.tsx

@@ -1,90 +0,0 @@
-'use client';
-
-import { useEffect, useState } from 'react';
-
-import { ArrowRight } from 'lucide-react';
-
-import { Button } from '@docyrus/ui-pro-shared/components/button';
-
-import { useApiClient } from '../lib/api-client';
-
-interface ForwardToAgentProps {
-  agentId?: string;
-  prompt?: string;
-  state?: string;
-  onForward?: () => void;
-}
-
-export function ForwardToAgent({ agentId, onForward }: ForwardToAgentProps) {
-  const apiClient = useApiClient();
-  const [agentName, setAgentName] = useState('');
-  const [avatar, setAvatar] = useState('');
-  const [loading, setLoading] = useState(false);
-
-  useEffect(() => {
-    if (!agentId) {
-      setAgentName('');
-      setAvatar('');
-
-      return;
-    }
-
-    const fetchAgent = async () => {
-      setLoading(true);
-      try {
-        const response = await apiClient.get(`/ai/agents/${agentId}`);
-
-        if (response.success && response.data) {
-          const data = response.data as { name?: string; avatar?: { signed_url?: string } | string };
-
-          setAgentName(data.name || '');
-          const avatarUrl = typeof data.avatar === 'string' ? data.avatar : data.avatar?.signed_url || '';
-
-          setAvatar(avatarUrl);
-        }
-      } catch (err) {
-        console.error('[ForwardToAgent] Error fetching agent:', err);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    fetchAgent();
-  }, [agentId, apiClient]);
-
-  return (
-    <div className="p-4 m-2 border bg-white border-slate-200 max-w-[500px] rounded-lg animate-bounce-subtle">
-      <div className="flex items-center gap-2">
-        <ArrowRight className="size-5 text-blue-500 flex-shrink-0" />
-        <span className="text-sm font-medium text-slate-700 whitespace-nowrap">
-          Forwarding to agent
-        </span>
-        {(avatar || agentName) && (
-          <div className="flex items-center gap-1.5 ml-1">
-            {avatar && (
-              <img
-                src={avatar}
-                alt="Agent Avatar"
-                className="w-5 h-5 rounded-full object-cover" />
-            )}
-            {agentName && (
-              <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-700">
-                {agentName}
-              </span>
-            )}
-          </div>
-        )}
-      </div>
-      <div className="mt-3 flex justify-end">
-        <Button
-          size="sm"
-          disabled={loading}
-          onClick={onForward}
-          className="gap-1.5 bg-emerald-600 hover:bg-emerald-700 text-white">
-          <ArrowRight className="size-3.5" />
-          {agentName ? `Forward to ${agentName}` : 'Forward to agent'}
-        </Button>
-      </div>
-    </div>
-  );
-}