@docyrus/ui-pro-ai-assistant 0.0.1

package/src/components/request-approval.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import { ConfirmationAction } from '@docyrus/ui-pro-shared/ai-elements/confirmation';
+
+import { useAssistantTranslation } from '../i18n';
+
+interface RequestApprovalProps {
+  state: string;
+  action?: string;
+  details?: string;
+  onApprove: () => void;
+  onReject: () => void;
+}
+
+export function RequestApproval({
+  state,
+  action,
+  details,
+  onApprove,
+  onReject
+}: RequestApprovalProps) {
+  const { t } = useAssistantTranslation();
+
+  if (state === 'input-streaming') return null;
+
+  const isResolved = state === 'output-available'
+    || state === 'output-denied'
+    || state === 'approval-responded';
+
+  return (
+    <div className="rounded-lg border bg-card p-4 space-y-3">
+      <h4 className="font-medium text-sm">{action || t('actions.approve')}</h4>
+      {details && (
+        <p className="text-sm text-muted-foreground">{details}</p>
+      )}
+      {!isResolved && (
+        <div className="flex items-center justify-end gap-2">
+          <ConfirmationAction onClick={onApprove}>
+            {t('actions.approve')}
+          </ConfirmationAction>
+          <ConfirmationAction variant="outline" onClick={onReject}>
+            {t('actions.reject')}
+          </ConfirmationAction>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/request-user-input.tsx

@@ -0,0 +1,270 @@
+'use client';
+
+import { useCallback, useState } from 'react';
+
+import { Button } from '@docyrus/ui-pro-shared/components/button';
+import { Input } from '@docyrus/ui-pro-shared/components/input';
+import { Textarea } from '@docyrus/ui-pro-shared/components/textarea';
+
+interface JsonSchemaProperty {
+  type?: string | string[];
+  title?: string;
+  description?: string;
+  enum?: any[];
+  items?: { type?: string; enum?: any[] };
+  format?: string;
+  minimum?: number;
+  maximum?: number;
+  multiline?: boolean;
+}
+
+interface JsonSchema {
+  type?: string;
+  properties?: Record<string, JsonSchemaProperty>;
+  required?: string[];
+}
+
+interface RequestUserInputProps {
+  schema: JsonSchema | string;
+  title?: string;
+  description?: string;
+  submitLabel?: string;
+  state: string;
+  output?: any;
+  onSubmit: (data: Record<string, any>) => void;
+  onCancel: () => void;
+}
+
+function parseSchema(schema: JsonSchema | string): JsonSchema {
+  if (typeof schema === 'string') {
+    try {
+      return JSON.parse(schema);
+    } catch {
+      return {};
+    }
+  }
+
+  return schema || {};
+}
+
+function FieldRenderer({
+  fieldKey,
+  property,
+  value,
+  onChange
+}: {
+  fieldKey: string;
+  property: JsonSchemaProperty;
+  value: any;
+  onChange: (key: string, val: any) => void;
+}) {
+  const label = property.title || fieldKey;
+  const isEnum = Array.isArray(property.enum) && property.enum.length > 0;
+  const type = Array.isArray(property.type) ? property.type[0] : property.type;
+
+  if (isEnum) {
+    return (
+      <div className="space-y-1">
+        <label className="text-sm font-medium">{label}</label>
+        {property.description && (
+          <p className="text-xs text-muted-foreground">{property.description}</p>
+        )}
+        <select
+          className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+          value={value ?? ''}
+          onChange={e => onChange(fieldKey, e.target.value)}>
+          <option value="">Select...</option>
+          {property.enum!.map(opt => (
+            <option key={String(opt)} value={String(opt)}>
+              {String(opt)}
+            </option>
+          ))}
+        </select>
+      </div>
+    );
+  }
+
+  if (type === 'boolean') {
+    return (
+      <div className="flex items-center gap-2">
+        <input
+          type="checkbox"
+          id={fieldKey}
+          className="rounded border-input"
+          checked={!!value}
+          onChange={e => onChange(fieldKey, e.target.checked)} />
+        <label htmlFor={fieldKey} className="text-sm font-medium cursor-pointer">
+          {label}
+        </label>
+        {property.description && (
+          <span className="text-xs text-muted-foreground">{property.description}</span>
+        )}
+      </div>
+    );
+  }
+
+  if (type === 'number' || type === 'integer') {
+    return (
+      <div className="space-y-1">
+        <label className="text-sm font-medium">{label}</label>
+        {property.description && (
+          <p className="text-xs text-muted-foreground">{property.description}</p>
+        )}
+        <Input
+          type="number"
+          value={value ?? ''}
+          min={property.minimum}
+          max={property.maximum}
+          onChange={e => onChange(fieldKey, e.target.value === '' ? '' : Number(e.target.value))} />
+      </div>
+    );
+  }
+
+  if (property.format === 'textarea' || property.multiline) {
+    return (
+      <div className="space-y-1">
+        <label className="text-sm font-medium">{label}</label>
+        {property.description && (
+          <p className="text-xs text-muted-foreground">{property.description}</p>
+        )}
+        <Textarea
+          value={value ?? ''}
+          rows={4}
+          onChange={e => onChange(fieldKey, e.target.value)} />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-1">
+      <label className="text-sm font-medium">{label}</label>
+      {property.description && (
+        <p className="text-xs text-muted-foreground">{property.description}</p>
+      )}
+      <Input
+        type={property.format === 'email' ? 'email' : property.format === 'uri' ? 'url' : 'text'}
+        value={value ?? ''}
+        onChange={e => onChange(fieldKey, e.target.value)} />
+    </div>
+  );
+}
+
+export function RequestUserInput({
+  schema,
+  title,
+  description,
+  submitLabel = 'Submit',
+  state,
+  output,
+  onSubmit,
+  onCancel
+}: RequestUserInputProps) {
+  const [formData, setFormData] = useState<Record<string, any>>({});
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const parsedSchema = parseSchema(schema);
+  const properties = parsedSchema.properties || {};
+  const requiredFields = parsedSchema.required || [];
+
+  const isOutputAvailable = state === 'output-available';
+
+  const isFormValid = requiredFields.every((key) => {
+    const value = formData[key];
+
+    if (value === null || value === undefined || value === '') return false;
+    if (Array.isArray(value) && value.length === 0) return false;
+
+    return true;
+  });
+
+  const handleChange = useCallback((key: string, val: any) => {
+    setFormData(prev => ({ ...prev, [key]: val }));
+  }, []);
+
+  const handleSubmit = async () => {
+    if (!isFormValid || isSubmitting) return;
+
+    setIsSubmitting(true);
+
+    const validatedData: Record<string, any> = {};
+
+    Object.entries(properties).forEach(([key]) => {
+      const value = formData[key];
+      const isRequired = requiredFields.includes(key);
+
+      if (!isRequired && (value === '' || value === null || value === undefined)) return;
+
+      validatedData[key] = value;
+    });
+
+    onSubmit(validatedData);
+    setTimeout(() => setIsSubmitting(false), 500);
+  };
+
+  if (isOutputAvailable) {
+    const displayData = output?.input ?? output ?? {};
+
+    return (
+      <div className="rounded-lg border bg-card p-4 space-y-3">
+        <h4 className="font-medium text-sm">Thanks for your input</h4>
+        {Object.keys(displayData).length > 0 && (
+          <div className="space-y-1">
+            {Object.entries(displayData).map(([key, val]) => {
+              const prop = properties[key];
+              const label = prop?.title || key;
+
+              return (
+                <div key={key} className="flex gap-2 text-sm">
+                  <span className="font-medium text-muted-foreground min-w-24">{label}:</span>
+                  <span>{String(val ?? '')}</span>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  const hasProperties = Object.keys(properties).length > 0;
+
+  return (
+    <div className="rounded-lg border bg-card p-4 space-y-4">
+      <div className="space-y-1">
+        <h4 className="font-medium text-base">{title || 'User Input Required'}</h4>
+        {description && (
+          <p className="text-sm text-muted-foreground">{description}</p>
+        )}
+      </div>
+
+      {hasProperties && (
+        <div className="space-y-3">
+          {Object.entries(properties).map(([key, prop]) => (
+            <FieldRenderer
+              key={key}
+              fieldKey={key}
+              property={prop}
+              value={formData[key]}
+              onChange={handleChange} />
+          ))}
+        </div>
+      )}
+
+      <div className="flex gap-2 pt-2 border-t">
+        <Button
+          size="sm"
+          disabled={!isFormValid || isSubmitting}
+          onClick={handleSubmit}>
+          {submitLabel}
+        </Button>
+        <Button
+          size="sm"
+          variant="outline"
+          disabled={isSubmitting}
+          onClick={onCancel}>
+          Cancel
+        </Button>
+      </div>
+    </div>
+  );
+}

package/src/components/search-web.tsx

@@ -0,0 +1,319 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+
+import { cn } from '@docyrus/ui-pro-shared/lib/utils';
+import { ChevronDown, Search } from 'lucide-react';
+
+interface SearchResult {
+  title: string;
+  link: string;
+  snippet?: string;
+  publishedDate?: string;
+  text?: string;
+  summary?: string;
+  favicon?: string;
+}
+
+interface WebSearchResult {
+  url: string;
+  type: string;
+  title: string;
+  pageAge?: string;
+}
+
+interface NewsResult {
+  title: string;
+  url: string;
+  snippet?: string;
+  date?: string;
+  imageUrl?: string;
+}
+
+interface ParsedOutput {
+  action?: { url?: string; query?: string };
+  output?: WebSearchResult[];
+  news?: NewsResult[];
+  results?: SearchResult[];
+  result?: string | SearchResult[] | { news?: NewsResult[] };
+  searchType?: string;
+  context?: string;
+}
+
+interface SearchWebProps {
+  state: string;
+  output?: any;
+  errorText?: string;
+  title?: string;
+}
+
+function parseOutput(output: any): ParsedOutput {
+  if (!output) return {};
+
+  let parsed: ParsedOutput;
+
+  if (typeof output === 'string') {
+    try {
+      const result = JSON.parse(output);
+
+      if (Array.isArray(result)) return { results: result as SearchResult[] };
+      parsed = result as ParsedOutput;
+    } catch {
+      return {};
+    }
+  } else if (Array.isArray(output)) {
+    return { results: output as SearchResult[] };
+  } else {
+    parsed = output as ParsedOutput;
+  }
+
+  if (parsed.result && typeof parsed.result === 'string') {
+    try {
+      const nested = JSON.parse(parsed.result);
+
+      if (nested && typeof nested === 'object') {
+        if (Array.isArray(nested.results)) parsed.results = nested.results;
+        if (nested.searchType) parsed.searchType = nested.searchType;
+        if (nested.context) parsed.context = nested.context;
+      } else if (Array.isArray(nested)) {
+        parsed.results = nested;
+      }
+    } catch {
+      // not valid JSON
+    }
+  }
+
+  return parsed;
+}
+
+function getDomain(url: string): string {
+  try {
+    return new URL(url).hostname.replace('www.', '');
+  } catch {
+    return url;
+  }
+}
+
+function cleanSnippet(snippet: string, maxLength = 150): string {
+  if (!snippet) return '';
+
+  return snippet
+    .replace(/\[([^\]]+)\]\([^)]+\)/g, '$1')
+    .replace(/[#*_]/g, '')
+    .replace(/\s+/g, ' ')
+    .trim()
+    .substring(0, maxLength);
+}
+
+function formatDate(dateString: string): string {
+  if (!dateString) return '';
+  try {
+    const date = new Date(dateString);
+    const now = new Date();
+    const hours = Math.floor((now.getTime() - date.getTime()) / 3600000);
+
+    if (hours < 1) return 'Just now';
+    if (hours < 24) return `${hours}h ago`;
+    if (hours < 48) return 'Yesterday';
+
+    return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+  } catch {
+    return dateString;
+  }
+}
+
+export function SearchWeb({
+  state, output, errorText, title
+}: SearchWebProps) {
+  const [open, setOpen] = useState(false);
+
+  const parsed = useMemo(() => parseOutput(output), [output]);
+
+  const webSearchResults = useMemo((): WebSearchResult[] => {
+    const out = parsed.output;
+
+    if (!Array.isArray(out)) return [];
+
+    return out.filter(item => item.type === 'web_search_result');
+  }, [parsed]);
+
+  const newsResults = useMemo((): NewsResult[] => {
+    const { result } = parsed;
+
+    if (result && typeof result === 'object' && !Array.isArray(result)) {
+      const { news } = result as { news?: NewsResult[] };
+
+      return Array.isArray(news) ? news : [];
+    }
+
+    return [];
+  }, [parsed]);
+
+  const searchResults = useMemo((): SearchResult[] => {
+    if (parsed.action || webSearchResults.length > 0 || newsResults.length > 0) return [];
+
+    if (Array.isArray(parsed.results)) return parsed.results;
+
+    const { result } = parsed;
+
+    if (typeof result === 'string') {
+      try {
+        const p = JSON.parse(result);
+
+        if (Array.isArray(p)) return p as SearchResult[];
+      } catch {
+        // not valid JSON
+      }
+    }
+    if (Array.isArray(result)) return result as SearchResult[];
+
+    return [];
+  }, [parsed, webSearchResults.length, newsResults.length]);
+
+  const hasResults
+    = searchResults.length > 0
+      || webSearchResults.length > 0
+      || newsResults.length > 0
+      || !!parsed.action?.url
+      || !!parsed.action?.query;
+
+  const headerText = parsed.action?.url ? 'URL Result' : parsed.action?.query ? 'Query' : newsResults.length > 0 ? `${newsResults.length} news` : webSearchResults.length > 0 ? `${webSearchResults.length} results` : `${searchResults.length} results`;
+
+  if (state === 'output-error') {
+    return (
+      <div className="text-xs text-destructive py-1">
+        Search failed: {errorText || 'Error'}
+      </div>
+    );
+  }
+
+  if (state !== 'output-available') return null;
+
+  if (!hasResults) {
+    return <div className="text-xs text-muted-foreground py-1">No results found</div>;
+  }
+
+  return (
+    <div className="text-primary text-xs">
+      <button
+        type="button"
+        className="flex items-center gap-2 mt-1 cursor-pointer"
+        onClick={() => setOpen(prev => !prev)}>
+        <Search className="w-4 h-4" />
+        <span className="font-medium">{title || headerText}</span>
+        <ChevronDown className={cn('size-3 transition-transform', open && 'rotate-180')} />
+      </button>
+
+      {open && (
+        <div className="mt-3 rounded-lg border bg-card overflow-hidden">
+          {parsed.action?.url && (
+            <div className="p-4">
+              <a
+                href={parsed.action.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-xs text-muted-foreground hover:underline break-all line-clamp-1">
+                {parsed.action.url}
+              </a>
+            </div>
+          )}
+
+          {!parsed.action?.url && parsed.action?.query && (
+            <div className="px-3 py-2">
+              <p className="text-xs text-muted-foreground">{parsed.action.query}</p>
+            </div>
+          )}
+
+          {!parsed.action && webSearchResults.length > 0 && (
+            <div className="divide-y">
+              {webSearchResults.map((result, i) => (
+                <div key={i} className="p-4 hover:bg-accent/5 transition-colors">
+                  <a
+                    href={result.url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="block space-y-1">
+                    <h3 className="text-xs font-medium text-foreground line-clamp-1">{result.title}</h3>
+                    <div className="flex items-center gap-1.5 text-[10px] text-muted-foreground">
+                      <span className="truncate max-w-[120px]">{getDomain(result.url)}</span>
+                      {result.pageAge && <span>• {result.pageAge}</span>}
+                    </div>
+                  </a>
+                </div>
+              ))}
+            </div>
+          )}
+
+          {!parsed.action && webSearchResults.length === 0 && newsResults.length > 0 && (
+            <div className="divide-y">
+              {newsResults.map((result, i) => (
+                <div key={i} className="p-4 hover:bg-accent/5 transition-colors">
+                  <a
+                    href={result.url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="flex gap-3">
+                    {result.imageUrl && (
+                      <img
+                        src={result.imageUrl}
+                        alt={result.title}
+                        className="w-16 h-16 object-cover rounded flex-shrink-0" />
+                    )}
+                    <div className="flex-1 min-w-0 space-y-0.5">
+                      <h3 className="text-xs font-medium text-foreground line-clamp-1">{result.title}</h3>
+                      {result.snippet && (
+                        <p className="text-[11px] text-muted-foreground line-clamp-1">
+                          {cleanSnippet(result.snippet, 100)}
+                        </p>
+                      )}
+                      <div className="flex items-center gap-1.5 text-[10px] text-muted-foreground">
+                        <span className="truncate max-w-[120px]">{getDomain(result.url)}</span>
+                        {result.date && <span>• {result.date}</span>}
+                      </div>
+                    </div>
+                  </a>
+                </div>
+              ))}
+            </div>
+          )}
+
+          {!parsed.action && webSearchResults.length === 0 && newsResults.length === 0 && searchResults.length > 0 && (
+            <div className="divide-y">
+              {searchResults.map((result, i) => (
+                <div key={i} className="px-3 py-2 hover:bg-accent/5 transition-colors">
+                  <a
+                    href={result.link}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="block space-y-0.5">
+                    <div className="flex items-center gap-1.5">
+                      {result.favicon && (
+                        <img
+                          src={result.favicon}
+                          alt={getDomain(result.link)}
+                          className="w-3.5 h-3.5 rounded flex-shrink-0"
+                          onError={(e) => { (e.target as HTMLImageElement).style.display = 'none'; }} />
+                      )}
+                      <h3 className="text-xs font-medium text-foreground hover:underline line-clamp-1 flex-1">
+                        {result.title}
+                      </h3>
+                    </div>
+                    {(result.summary || result.text || result.snippet) && (
+                      <p className="text-[11px] text-muted-foreground line-clamp-2 leading-tight">
+                        {result.summary || cleanSnippet(result.text || result.snippet || '')}
+                      </p>
+                    )}
+                    <div className="flex items-center gap-1.5 text-[10px] text-muted-foreground">
+                      <span className="truncate max-w-[120px]">{getDomain(result.link)}</span>
+                      {result.publishedDate && <span>• {formatDate(result.publishedDate)}</span>}
+                    </div>
+                  </a>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}