spb/uqo-chat

1import { Download, Share2 } from 'lucide-react';2import type { ToolCallView } from '@/lib/types';3import { downloadFile, shareFile } from '@/lib/api';45export function ChartCard({ call }: { call: ToolCallView }) {6  const p = call.payload as { title?: string; type?: string; file_id?: string; filename?: string };7  const fileId = p.file_id || call.artifacts?.[0]?.file_id;8  if (!fileId) return <p className="text-sm text-neutral-muted">{call.summary}</p>;9  return (10    <figure className="rounded-xl border border-neutral-line overflow-hidden bg-white">11      <img src={`/api/v1/files/${fileId}`} alt={p.title || 'graphique'} className="w-full max-h-[480px] object-contain" loading="lazy" />12      <figcaption className="flex items-center justify-between gap-2 px-3 py-2 text-xs text-neutral-muted border-t border-neutral-line">13        <span className="truncate">{p.title || p.filename} · {p.type}</span>14        <span className="flex gap-1">15          <button onClick={() => downloadFile(fileId, p.filename || 'graphique.png')} className="h-8 px-2 rounded-lg hover:bg-neutral-surface inline-flex items-center gap-1 text-uqo-blue"><Download size={13} /> PNG</button>16          {typeof navigator !== 'undefined' && !!navigator.share && <button onClick={() => shareFile(fileId, p.filename || 'graphique.png')} className="h-8 px-2 rounded-lg hover:bg-neutral-surface inline-flex items-center gap-1"><Share2 size={13} /></button>}17        </span>18      </figcaption>19    </figure>20  );21}22