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

package/src/components/request-approval.tsx

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

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

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