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

package/src/components/show-people-cards.tsx

@@ -1,180 +0,0 @@
-'use client';
-
-import { MapPin, Plus, User } from 'lucide-react';
-
-interface Person {
-  firstName?: string;
-  lastName?: string;
-  photoUrl?: string;
-  jobTitle?: string;
-  company?: string;
-  locationCity?: string;
-  locationCountry?: string;
-  linkedinUrl?: string;
-  companyLinkedInUrl?: string;
-}
-
-interface ShowPeopleCardsProps {
-  state: string;
-  output?: any;
-  errorText?: string;
-  title?: string;
-}
-
-function parsePeople(output: any): Person[] {
-  if (!output) return [];
-
-  let data = output;
-
-  if (typeof data === 'string') {
-    try {
-      data = JSON.parse(data);
-    } catch {
-      return [];
-    }
-  }
-
-  if (Array.isArray(data)) return data;
-
-  if (data && typeof data === 'object') {
-    if (Array.isArray(data.result)) return data.result;
-  }
-
-  return [];
-}
-
-function getFullName(person: Person): string {
-  const parts = [person.firstName, person.lastName].filter(Boolean);
-
-  return parts.length > 0 ? parts.join(' ') : 'Unknown';
-}
-
-function getInitials(person: Person): string {
-  const first = person.firstName?.[0] || '';
-  const last = person.lastName?.[0] || '';
-
-  return (first + last).toUpperCase() || '?';
-}
-
-export function ShowPeopleCards({
-  state,
-  output,
-  title
-}: ShowPeopleCardsProps) {
-  if (state === 'output-error') {
-    return <div className="text-xs text-destructive py-1">Failed to load people</div>;
-  }
-
-  if (state !== 'output-available') return null;
-
-  const people = parsePeople(output);
-
-  if (people.length === 0) {
-    return <div className="text-xs text-muted-foreground py-1">No people to display</div>;
-  }
-
-  return (
-    <div className="not-prose mb-4 w-full">
-      {/* Header */}
-      <div className="flex items-center gap-2 mb-2">
-        <User className="w-4 h-4 text-primary" />
-        <p className="text-xs font-medium text-primary">
-          {title || `${people.length} people`}
-        </p>
-      </div>
-
-      {/* Horizontal scrollable grid with 2 rows */}
-      <div className="overflow-x-auto">
-        <div
-          className="grid gap-2 pb-2"
-          style={{ gridAutoFlow: 'column', gridTemplateColumns: `repeat(${Math.ceil(people.length / 2)}, 200px)`, gridTemplateRows: 'repeat(2, auto)' }}>
-          {people.map((person, index) => (
-            <div
-              key={index}
-              className="flex flex-col p-4 rounded-lg bg-slate-50">
-              <div className="flex items-center justify-between mb-4">
-                <div className="flex items-center">
-                  {person.photoUrl ? (
-                    <img
-                      src={person.photoUrl}
-                      alt={getFullName(person)}
-                      className="w-10 h-10 rounded-full border-2 border-white object-cover"
-                      onError={(e) => { (e.target as HTMLImageElement).style.display = 'none'; }} />
-                  ) : (
-                    <div className="w-10 h-10 rounded-full border-2 border-white bg-muted flex items-center justify-center">
-                      <span className="text-xs font-medium text-muted-foreground">
-                        {getInitials(person)}
-                      </span>
-                    </div>
-                  )}
-                </div>
-                <button
-                  type="button"
-                  className="flex items-center justify-center w-6 h-6 rounded border border-input bg-white hover:bg-accent transition-colors"
-                  onClick={() => { /* add to contact handler */ }}>
-                  <Plus className="w-3 h-3" />
-                </button>
-              </div>
-
-              {/* Name */}
-              <span className="text-[11px] font-medium text-foreground line-clamp-1">
-                {getFullName(person)}
-              </span>
-
-              {/* Job title */}
-              {person.jobTitle && (
-                <span className="text-[10px] text-blue-600 line-clamp-1 w-full">
-                  {person.jobTitle}
-                </span>
-              )}
-
-              {/* Company */}
-              {person.company && (
-                person.companyLinkedInUrl ? (
-                  <a
-                    href={person.companyLinkedInUrl}
-                    className="text-[10px] font-medium text-gray-500 hover:underline w-full line-clamp-1"
-                    target="_blank"
-                    rel="noopener noreferrer">
-                    {person.company}
-                  </a>
-                ) : (
-                  <span className="text-[10px] font-medium text-gray-500 w-full">
-                    {person.company}
-                  </span>
-                )
-              )}
-
-              {/* Location */}
-              {(person.locationCity || person.locationCountry) && (
-                <div className="my-1 flex items-center gap-1">
-                  <MapPin className="w-3 h-3 text-gray-400 flex-shrink-0" />
-                  <span className="text-[9px] line-clamp-1 w-full">
-                    {[person.locationCity, person.locationCountry].filter(Boolean).join(', ')}
-                  </span>
-                </div>
-              )}
-
-              <div className="mt-auto">
-                <hr className="my-1" />
-                <div className="text-end">
-                  {person.linkedinUrl ? (
-                    <a
-                      href={person.linkedinUrl}
-                      className="hover:underline text-[10px]"
-                      target="_blank"
-                      rel="noopener noreferrer">
-                      View Profile
-                    </a>
-                  ) : (
-                    <span className="text-[10px] text-muted-foreground">No profile</span>
-                  )}
-                </div>
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/components/subagent-tool.tsx

@@ -1,180 +0,0 @@
-'use client';
-
-import { useEffect, useRef, useState } from 'react';
-
-import {
-  CheckCircle, FolderOpen, Loader2, User
-} from 'lucide-react';
-
-import { WorkCanvas } from './work-canvas';
-
-interface StepItem {
-  data: Record<string, any>;
-  message: string;
-}
-
-interface SubagentToolProps {
-  toolState: string;
-  input?: Record<string, any>;
-  status?: string;
-  text?: string;
-  icon?: string;
-  skillName?: string;
-  agentName?: string;
-  step?: Record<string, any>;
-  result?: Record<string, any>;
-  agent?: Record<string, any>;
-  openCanvasView?: (options: {
-    type: string;
-    id: string;
-    versionId?: string;
-    title?: string;
-    description?: string;
-    contentJson?: Record<string, any> | null;
-  }) => void;
-}
-
-export function SubagentTool({
-  toolState,
-  input,
-  status,
-  skillName,
-  agentName,
-  step,
-  result,
-  agent,
-  openCanvasView
-}: SubagentToolProps) {
-  const [steps, setSteps] = useState<StepItem[]>([]);
-  const hasOpenedXlsx = useRef(false);
-  const prevStep = useRef<Record<string, any> | undefined>(undefined);
-
-  useEffect(() => {
-    if (!step?.step || step === prevStep.current) return;
-    prevStep.current = step;
-
-    let message: string = step.step?.name || 'Processing...';
-
-    if (agent?.steps) {
-      const stepConfig = agent.steps.find((s: any) => s.id === step.step?.id);
-      const messageTemplates = stepConfig?.messageTemplates;
-      const template
-        = step.eventType === 'start' ? messageTemplates?.in_progress : messageTemplates?.completed;
-
-      if (template) {
-        message = template;
-      }
-    }
-
-    setSteps(prev => [...prev, { data: step, message }]);
-  }, [step, agent]);
-
-  useEffect(() => {
-    if (
-      input?.type === 'xlsx'
-      && status === 'success'
-      && result?.workId
-      && !hasOpenedXlsx.current
-    ) {
-      hasOpenedXlsx.current = true;
-      openCanvasView?.({
-        type: 'xlsx',
-        id: result.workId,
-        versionId: result.workVersionId,
-        title: result.title,
-        contentJson: result.content
-      });
-    }
-  }, [
-    input?.type,
-    status,
-    result,
-    openCanvasView
-  ]);
-
-  const isLoading = toolState === 'input-streaming' || status === 'started';
-
-  return (
-    <div className="relative pl-4 ml-4 mt-4 pt-4 border-l border-slate-100">
-      <div className="absolute -top-4 -left-4 rounded-full px-2 py-1 text-[10px] bg-slate-100 w-fit flex items-center gap-1">
-        {skillName && (
-          <>
-            <FolderOpen className="size-4" />
-            <i>{skillName}</i>
-            <span>skill loaded</span>
-          </>
-        )}
-        {agentName && (
-          <>
-            <User className="size-4" />
-            <i>{agentName}</i>
-            <span>agent called</span>
-          </>
-        )}
-      </div>
-
-      {isLoading ? (
-        <Loader2 className="size-4 animate-spin text-muted-foreground" />
-      ) : (
-        <>
-          {input?.type === 'text' && (
-            <div className="text-sm">
-              {result?.delta || result?.content || ''}
-            </div>
-          )}
-
-          {input?.type === 'xlsx' && (
-            status !== 'success' ? (
-              <Loader2 className="size-4 animate-spin text-muted-foreground" />
-            ) : (
-              <WorkCanvas
-                title={result?.title}
-                description={result?.description}
-                id={result?.workId || 'streaming'}
-                content={JSON.stringify(result?.content, null, 2)}
-                state={toolState}
-                onOpen={() => openCanvasView?.({
-                  type: 'xlsx',
-                  id: result?.workId,
-                  versionId: result?.workVersionId,
-                  title: result?.title,
-                  contentJson: result?.content
-                })} />
-            )
-          )}
-
-          {input?.type === 'work' && (
-            <div className="space-y-2">
-              {steps.length > 0 && (
-                <div className="space-y-1">
-                  {steps.map((stepItem, idx) => (
-                    <div key={idx} className="flex items-center space-x-2">
-                      <CheckCircle className="size-4 text-green-500 flex-none" />
-                      <div className="text-sm">{stepItem.message}</div>
-                    </div>
-                  ))}
-                </div>
-              )}
-              {status === 'success' && (
-                <WorkCanvas
-                  title={result?.title || result?.content?.layout?.title}
-                  description={result?.description || result?.content?.layout?.description}
-                  id={result?.workId || 'streaming'}
-                  content={JSON.stringify(result?.content, null, 2)}
-                  state={toolState}
-                  onOpen={() => openCanvasView?.({
-                    type: input?.workType,
-                    id: result?.workId || 'streaming',
-                    versionId: result?.workVersionId || 'streaming',
-                    title: result?.content?.layout?.title || result?.content?.title || result?.title,
-                    description: result?.content?.layout?.description || result?.content?.description,
-                    contentJson: result?.content
-                  })} />
-              )}
-            </div>
-          )}
-        </>
-      )}
-    </div>
-  );
-}

package/src/components/text-editor-tool.tsx

@@ -1,328 +0,0 @@
-'use client';
-
-import { useState, type ReactNode } from 'react';
-
-import {
-  AlertCircle,
-  ArrowDownToLine,
-  ArrowUpDown,
-  CheckCircle,
-  ChevronDown,
-  Eye,
-  Loader2,
-  PenLine,
-  Plus,
-  Search,
-  XCircle
-} from 'lucide-react';
-
-import { cn } from '@docyrus/ui-pro-shared/lib/utils';
-
-type Command = 'view' | 'create' | 'str_replace' | 'insert' | 'replace_range' | 'search';
-
-interface TextEditorToolResult {
-  success: boolean;
-  error?: string;
-  lineCount?: number;
-  content?: string;
-}
-
-interface TextEditorToolProps {
-  command?: Command;
-  path?: string;
-  fileText?: string;
-  oldStr?: string;
-  newStr?: string;
-  insertLine?: number;
-  viewRange?: [number, number] | null;
-  query?: string;
-  state?: 'input-available' | 'input-streaming' | 'output-available' | 'output-error' | string;
-  result?: TextEditorToolResult | null;
-  errorText?: string;
-  onOpen?: () => void;
-}
-
-const commandConfig: Record<Command, {
-  icon: ReactNode;
-  bg: string;
-  iconColor: string;
-  badge: string;
-  label: string;
-}> = {
-  view: {
-    icon: <Eye className="size-3" />,
-    bg: 'bg-sky-100',
-    iconColor: 'text-sky-600',
-    badge: 'text-sky-600 bg-sky-100 px-2 py-0.5 rounded',
-    label: 'View'
-  },
-  create: {
-    icon: <Plus className="size-3" />,
-    bg: 'bg-emerald-100',
-    iconColor: 'text-emerald-600',
-    badge: 'text-emerald-600 bg-emerald-100 px-2 py-0.5 rounded',
-    label: 'Create'
-  },
-  str_replace: {
-    icon: <PenLine className="size-3" />,
-    bg: 'bg-amber-100',
-    iconColor: 'text-amber-600',
-    badge: 'text-amber-600 bg-amber-100 px-2 py-0.5 rounded',
-    label: 'Edit'
-  },
-  insert: {
-    icon: <ArrowDownToLine className="size-3" />,
-    bg: 'bg-violet-100',
-    iconColor: 'text-violet-600',
-    badge: 'text-violet-600 bg-violet-100 px-2 py-0.5 rounded',
-    label: 'Insert'
-  },
-  replace_range: {
-    icon: <ArrowUpDown className="size-3" />,
-    bg: 'bg-orange-100',
-    iconColor: 'text-orange-600',
-    badge: 'text-orange-600 bg-orange-100 px-2 py-0.5 rounded',
-    label: 'Replace Range'
-  },
-  search: {
-    icon: <Search className="size-3" />,
-    bg: 'bg-indigo-100',
-    iconColor: 'text-indigo-600',
-    badge: 'text-indigo-600 bg-indigo-100 px-2 py-0.5 rounded',
-    label: 'Search'
-  }
-};
-
-function getResultMessage(command: Command, result: TextEditorToolResult): string {
-  if (!result.success) return result.error || 'Operation failed';
-
-  switch (command) {
-    case 'view': return `Loaded ${result.lineCount || ''} lines`.trim();
-
-    case 'create': return 'Work created successfully';
-
-    case 'str_replace': return 'Text replaced successfully';
-
-    case 'insert': return 'Content inserted successfully';
-
-    case 'replace_range': return 'Lines replaced successfully';
-
-    case 'search': return result.content === 'No matches found.' ? 'No matches found' : 'Search completed successfully';
-
-    default: return 'Operation completed';
-  }
-}
-
-function getDisplayPath(path: string): string {
-  if (!path) return '';
-  if (path.startsWith('work://')) {
-    const uuid = path.replace('work://', '');
-
-    return uuid.length > 20 ? `work://${uuid.slice(0, 8)}...${uuid.slice(-4)}` : path;
-  }
-
-  return '';
-}
-
-function ResultBadge({ command, result }: { command: Command; result: TextEditorToolResult }) {
-  return (
-    <div className={cn(
-      'flex items-center gap-2 pt-2 mt-2 border-t',
-      result.success ? 'border-slate-100' : 'border-rose-100'
-    )}>
-      {result.success ? <CheckCircle className="size-4 text-emerald-500 flex-none" /> : <XCircle className="size-4 text-rose-500 flex-none" />}
-      <span className={cn(
-        'text-xs font-medium',
-        result.success ? 'text-emerald-600' : 'text-rose-600'
-      )}>
-        {getResultMessage(command, result)}
-      </span>
-    </div>
-  );
-}
-
-function ErrorBadge({ errorText }: { errorText: string }) {
-  return (
-    <div className="flex items-center gap-2 pt-2 mt-2 border-t border-rose-100">
-      <AlertCircle className="size-4 text-rose-500 flex-none" />
-      <span className="text-xs font-medium text-rose-600">{errorText}</span>
-    </div>
-  );
-}
-
-function CommandHeader({ command, path }: { command: Command; path?: string }) {
-  const config = commandConfig[command] ?? commandConfig.view;
-  const displayPath = getDisplayPath(path || '');
-
-  return (
-    <div className="flex items-center gap-2 w-full">
-      <div className={cn('flex-none p-1 rounded-lg', config.bg)}>
-        <span className={config.iconColor}>{config.icon}</span>
-      </div>
-      <span className={cn('text-xs font-medium uppercase tracking-wide', config.badge)}>
-        {config.label}
-      </span>
-      {displayPath && (
-        <p className="text-xs text-muted-foreground font-mono truncate">{displayPath}</p>
-      )}
-    </div>
-  );
-}
-
-export function TextEditorTool({
-  command = 'view',
-  path = '',
-  fileText = '',
-  oldStr = '',
-  newStr = '',
-  insertLine = 0,
-  viewRange = null,
-  query = '',
-  state = 'input-available',
-  result = null,
-  errorText = '',
-  onOpen
-}: TextEditorToolProps) {
-  const [open, setOpen] = useState(false);
-
-  const isStreaming = state === 'input-streaming';
-  const hasResult = state === 'output-available' && !!result;
-  const hasError = state === 'output-error' && !!errorText;
-
-  const handleClick = () => {
-    if (state === 'output-available') onOpen?.();
-  };
-
-  // view command: simple card without disclosure
-  if (command === 'view') {
-    return (
-      <div className="flex flex-row items-center space-x-4">
-        <div
-          className="rounded-lg shadow-sm w-fit min-w-80 max-w-[500px] border bg-card p-4 flex flex-col cursor-pointer transition-all hover:shadow-md"
-          onClick={handleClick}>
-          <div className="flex items-center gap-2">
-            <CommandHeader command={command} path={path} />
-            {viewRange && (
-              <div className="flex items-center gap-2 text-xs text-muted-foreground ml-auto whitespace-nowrap">
-                <span>Lines {viewRange[0]} - {viewRange[1]}</span>
-              </div>
-            )}
-          </div>
-          {hasResult && <ResultBadge command={command} result={result} />}
-          {hasError && <ErrorBadge errorText={errorText} />}
-        </div>
-        {isStreaming && <Loader2 className="size-6 animate-spin text-primary flex-none" />}
-      </div>
-    );
-  }
-
-  // other commands: collapsible disclosure
-  return (
-    <div className="flex flex-row items-center space-x-4">
-      <div className="rounded-lg shadow-sm w-fit min-w-80 max-w-[500px] border bg-card p-4 flex flex-col transition-all hover:shadow-md">
-        <button
-          type="button"
-          className="flex items-center gap-2 w-full cursor-pointer"
-          onClick={() => setOpen(prev => !prev)}>
-          <CommandHeader command={command} path={path} />
-          <ChevronDown className={cn(
-            'size-3 text-muted-foreground flex-none ml-auto transition-transform',
-            open && 'rotate-180'
-          )} />
-        </button>
-
-        {open && (
-          <div className="mt-2 space-y-2">
-            {/* create: show content preview */}
-            {command === 'create' && fileText && (
-              <div className="bg-slate-50 rounded-md p-2">
-                <pre className="text-xs text-muted-foreground font-mono whitespace-pre-wrap">{fileText}</pre>
-              </div>
-            )}
-
-            {/* str_replace: show old → new */}
-            {command === 'str_replace' && (oldStr || newStr) && (
-              <div className="flex flex-col sm:flex-row gap-2">
-                {oldStr && (
-                  <div className="flex-1 min-w-0">
-                    <div className="flex items-center gap-1 mb-1">
-                      <span className="text-xs font-medium text-rose-600">−</span>
-                    </div>
-                    <pre className="text-xs font-mono bg-rose-50 text-rose-700 px-2 py-1 rounded whitespace-pre-wrap break-all">{oldStr}</pre>
-                  </div>
-                )}
-                {newStr && (
-                  <div className="flex-1 min-w-0">
-                    <div className="flex items-center gap-1 mb-1">
-                      <span className="text-xs font-medium text-emerald-600">+</span>
-                    </div>
-                    <pre className="text-xs font-mono bg-emerald-50 text-emerald-700 px-2 py-1 rounded whitespace-pre-wrap break-all">{newStr}</pre>
-                  </div>
-                )}
-              </div>
-            )}
-
-            {/* insert: show line number and content */}
-            {command === 'insert' && (
-              <div className="space-y-1.5">
-                <div className="flex items-center gap-2 text-xs text-muted-foreground">
-                  <span>Insert at line {insertLine === 0 ? 'beginning' : insertLine}</span>
-                </div>
-                {newStr && (
-                  <div className="flex items-start gap-2">
-                    <span className="text-xs font-medium text-blue-600">+</span>
-                    <pre className="text-xs font-mono bg-blue-50 text-blue-700 px-2 py-1 rounded whitespace-pre-wrap break-all">{newStr}</pre>
-                  </div>
-                )}
-              </div>
-            )}
-
-            {/* replace_range: show line range and new content */}
-            {command === 'replace_range' && (
-              <div className="space-y-1.5">
-                <div className="flex items-center gap-2 text-xs text-muted-foreground">
-                  <span>Replace lines {viewRange?.[0]} - {viewRange?.[1] === -1 ? 'end' : viewRange?.[1]}</span>
-                </div>
-                {newStr && (
-                  <div className="flex items-start gap-2">
-                    <span className="text-xs font-medium text-orange-600">↔</span>
-                    <pre className="text-xs font-mono bg-orange-50 text-orange-700 px-2 py-1 rounded whitespace-pre-wrap break-all">{newStr}</pre>
-                  </div>
-                )}
-              </div>
-            )}
-
-            {/* search: show query and results */}
-            {command === 'search' && (
-              <div className="space-y-1.5">
-                <div className="flex items-center gap-2 text-xs text-muted-foreground">
-                  <span>Search for:</span>
-                </div>
-                <pre className="text-xs font-mono bg-indigo-50 text-indigo-700 px-2 py-1 rounded whitespace-pre-wrap break-all">{query}</pre>
-                {result?.content && result.content !== 'No matches found.' && (
-                  <div className="mt-2">
-                    <div className="flex items-center gap-1 mb-1">
-                      <span className="text-xs font-medium text-indigo-600">Results:</span>
-                    </div>
-                    <pre className="text-xs font-mono bg-slate-50 text-slate-700 px-2 py-1.5 rounded whitespace-pre-wrap break-all max-h-48 overflow-y-auto border border-slate-200">{result.content}</pre>
-                  </div>
-                )}
-                {result?.content === 'No matches found.' && (
-                  <span className="text-xs text-slate-500 italic">No matches found</span>
-                )}
-              </div>
-            )}
-          </div>
-        )}
-
-        {hasResult && (
-          <div className="cursor-pointer" onClick={handleClick}>
-            <ResultBadge command={command} result={result} />
-          </div>
-        )}
-        {hasError && <ErrorBadge errorText={errorText} />}
-      </div>
-      {isStreaming && <Loader2 className="size-6 animate-spin text-primary flex-none" />}
-    </div>
-  );
-}