@docyrus/ui-pro-ai-assistant 0.0.1

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

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

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

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