@twentyfirstmedia/ui-core 0.2.0 → 0.3.0

package/src/components/charts.tsx

@@ -2,7 +2,8 @@
 
 import * as React from "react";
 import { useMounted, useWidth } from "../hooks.js";
-import { formatNumber } from "../format.js";
+import { useFormat, useStrings } from "../context.js";
+import { CHARTS_STRINGS } from "../strings.js";
 import { cx } from "../cx.js";
 import { Icon } from "../Icon.js";
 import { CountUp } from "./data-display.js";
@@ -24,6 +25,7 @@ function niceMax(m: number) {
   return Math.ceil(m / p) * p;
 }
 export function BarChart(p: BarChartProps) {
+  const t = useStrings(CHARTS_STRINGS);
   const mw = useWidth(p.width, 560),
     data = p.data || [],
     W = mw[1],
@@ -43,7 +45,7 @@ export function BarChart(p: BarChartProps) {
         viewBox={"0 0 " + W + " " + (Hh + 22)}
         preserveAspectRatio="xMinYMin meet"
         role="img"
-        aria-label={p.label || "Bar chart"}
+        aria-label={p.label || t.barChart}
       >
         {ticks.map((t) => {
           const y = Hh - t * (Hh - 10);
@@ -92,6 +94,7 @@ export function BarChart(p: BarChartProps) {
   );
 }
 export function LineChart(p: LineChartProps) {
+  const t = useStrings(CHARTS_STRINGS);
   const mw = useWidth(p.width, 560),
     series = p.series || [],
     labels = p.labels || [],
@@ -122,7 +125,7 @@ export function LineChart(p: LineChartProps) {
         viewBox={"0 0 " + W + " " + (Hh + 22)}
         preserveAspectRatio="xMinYMin meet"
         role="img"
-        aria-label={p.label || "Line chart"}
+        aria-label={p.label || t.lineChart}
       >
         {[0, 0.5, 1].map((t) => {
           const y = Hh - t * (Hh - 12);
@@ -181,6 +184,7 @@ export function LineChart(p: LineChartProps) {
   );
 }
 export function Sparkline(p: SparklineProps) {
+  const t = useStrings(CHARTS_STRINGS);
   const v = p.values || [],
     W = p.width || 120,
     Hh = p.height || 36,
@@ -203,7 +207,7 @@ export function Sparkline(p: SparklineProps) {
       width={W}
       height={Hh}
       role="img"
-      aria-label={p.label || "Trend"}
+      aria-label={p.label || t.trend}
     >
       <path
         className={cx("tf-line", "tf-line-" + (p.tint || "ink"))}
@@ -217,6 +221,7 @@ export function Sparkline(p: SparklineProps) {
   );
 }
 export function Donut(p: DonutProps) {
+  const t = useStrings(CHARTS_STRINGS);
   const data = p.data || [],
     size = p.size || 168,
     sw = p.stroke || 22,
@@ -245,7 +250,7 @@ export function Donut(p: DonutProps) {
           height={size}
           viewBox={"0 0 " + size + " " + size}
           role="img"
-          aria-label={p.label || "Breakdown"}
+          aria-label={p.label || t.breakdown}
         >
           <circle className="tf-arc-track" cx={size / 2} cy={size / 2} r={r} strokeWidth={sw} />
           {data.map((d, i) => {
@@ -361,6 +366,7 @@ export function Legend(p: LegendProps) {
   );
 }
 export function StackedBarChart(p: StackedBarChartProps) {
+  const t = useStrings(CHARTS_STRINGS);
   const mw = useWidth(p.width, 560),
     W = mw[1],
     Hh = p.height || 200,
@@ -382,7 +388,7 @@ export function StackedBarChart(p: StackedBarChartProps) {
         height={Hh + 22}
         viewBox={"0 0 " + W + " " + (Hh + 22)}
         role="img"
-        aria-label={p.label || "Stacked bar chart"}
+        aria-label={p.label || t.stackedBarChart}
         onPointerLeave={() => {
           hov[1](null);
         }}
@@ -533,6 +539,7 @@ function smooth(pts: number[][]) {
   return d;
 }
 export function AreaChart(p: AreaChartProps) {
+  const t = useStrings(CHARTS_STRINGS);
   const mw = useWidth(p.width, 560),
     W = mw[1],
     Hh = p.height || 200,
@@ -573,7 +580,7 @@ export function AreaChart(p: AreaChartProps) {
         height={Hh + 22}
         viewBox={"0 0 " + W + " " + (Hh + 22)}
         role="img"
-        aria-label={p.label || "Area chart"}
+        aria-label={p.label || t.areaChart}
         onPointerMove={(e) => {
           const r = e.currentTarget.getBoundingClientRect(),
             x = ((e.clientX - r.left) * W) / r.width;
@@ -672,6 +679,7 @@ export function AreaChart(p: AreaChartProps) {
   );
 }
 export function Heatmap(p: HeatmapProps) {
+  const t = useStrings(CHARTS_STRINGS);
   const rows = p.rows || [],
     cols = p.cols || [],
     vals = p.values || [],
@@ -690,7 +698,7 @@ export function Heatmap(p: HeatmapProps) {
           gridTemplateColumns: "auto repeat(" + cols.length + ", minmax(0, 1fr))",
         }}
         role="img"
-        aria-label={p.label || "Heatmap"}
+        aria-label={p.label || t.heatmap}
         onPointerLeave={() => {
           hov[1](null);
         }}
@@ -738,17 +746,18 @@ export function Heatmap(p: HeatmapProps) {
             : p.caption || ""}
         </span>
         <span className="tf-heat-scale">
-          {"Less"}
+          {t.less}
           {[0, 1, 2, 3, 4].map((l) => (
             <i key={l} className={"tf-heat-cell l" + l} />
           ))}
-          {"More"}
+          {t.more}
         </span>
       </div>
     </div>
   );
 }
 export function Funnel(p: FunnelProps) {
+  const { formatNumber } = useFormat();
   const steps = p.steps || [],
     top = (steps[0] && steps[0].value) || 1,
     f = p.format || ((v) => formatNumber(v)),
@@ -791,6 +800,7 @@ export function Funnel(p: FunnelProps) {
   );
 }
 export function Gauge(p: GaugeProps) {
+  const t = useStrings(CHARTS_STRINGS);
   const size = p.size || 200,
     sw = p.stroke || 18,
     r = (size - sw) / 2,
@@ -819,7 +829,7 @@ export function Gauge(p: GaugeProps) {
         height={size / 2 + sw / 2}
         viewBox={"0 0 " + size + " " + (size / 2 + sw / 2)}
         role="img"
-        aria-label={`${p.label || "Gauge"}: ${v} of ${max}`}
+        aria-label={t.gaugeValue(p.label || t.gauge, v, max)}
       >
         <path
           className="tf-arc-track"

package/src/components/chat.tsx

@@ -1,7 +1,8 @@
 "use client";
 import * as React from "react";
+import { useFormat, useStrings } from "../context.js";
+import { CHAT_STRINGS } from "../strings.js";
 import { cx } from "../cx.js";
-import { formatNumber } from "../format.js";
 import { Icon } from "../Icon.js";
 import { useControlled } from "../hooks.js";
 import { Avatar, Badge, TintIcon } from "./foundation.js";
@@ -152,6 +153,7 @@ export function hl(line: string, k: string | number): React.ReactNode[] {
 }
 
 export function CodeBlock(p: CodeBlockProps) {
+  const t = useStrings(CHAT_STRINGS);
   const copied = React.useState(false);
   function copy() {
     try {
@@ -168,9 +170,9 @@ export function CodeBlock(p: CodeBlockProps) {
     <div className="tf-code">
       <div className="tf-code-head">
         <span>{p.lang || "text"}</span>
-        <button type="button" className="tf-code-copy" onClick={copy} aria-label="Copy code">
+        <button type="button" className="tf-code-copy" onClick={copy} aria-label={t.copyCode}>
           <Icon name={copied[0] ? "check" : "file"} size={13} />
-          {copied[0] ? "Copied" : "Copy"}
+          {copied[0] ? t.copied : t.copy}
         </button>
       </div>
       <pre tabIndex={0}>
@@ -191,8 +193,9 @@ export function CodeBlock(p: CodeBlockProps) {
 
 /* ── Chat building blocks ── */
 export function TypingDots(p: { label?: string }) {
+  const t = useStrings(CHAT_STRINGS);
   return (
-    <span className="tf-typing" role="status" aria-label={p.label || "Working"}>
+    <span className="tf-typing" role="status" aria-label={p.label || t.working}>
       <i />
       <i />
       <i />
@@ -217,6 +220,7 @@ export function AgentMark(p: AgentMarkProps) {
 }
 
 export function ChatMessage(p: ChatMessageProps) {
+  const t = useStrings(CHAT_STRINGS);
   const me = p.role === "user",
     copied = React.useState(false),
     fb = React.useState(p.feedback || null);
@@ -240,7 +244,7 @@ export function ChatMessage(p: ChatMessageProps) {
   return (
     <div className={cx("tf-msg", me ? "me" : "ai", p.className)}>
       {me ? (
-        <Avatar name={p.name || "You"} size={32} />
+        <Avatar name={p.name || t.you} size={32} />
       ) : (
         <AgentMark tint={p.tint} live={p.streaming} />
       )}
@@ -301,29 +305,29 @@ export function ChatMessage(p: ChatMessageProps) {
         )}
         {!me && !p.streaming && p.actions !== false && (
           <div className="tf-msg-actions">
-            <Tooltip label={copied[0] ? "Copied" : "Copy"}>
-              <button type="button" className="tf-msg-act" aria-label="Copy reply" onClick={copy}>
+            <Tooltip label={copied[0] ? t.copied : t.copy}>
+              <button type="button" className="tf-msg-act" aria-label={t.copyReply} onClick={copy}>
                 <Icon name={copied[0] ? "check" : "file"} size={14} />
               </button>
             </Tooltip>
             {p.onRetry && (
-              <Tooltip label="Regenerate">
+              <Tooltip label={t.regenerate}>
                 <button
                   type="button"
                   className="tf-msg-act"
-                  aria-label="Regenerate reply"
+                  aria-label={t.regenerateReply}
                   onClick={p.onRetry}
                 >
                   <Icon name="refresh" size={14} />
                 </button>
               </Tooltip>
             )}
-            <Tooltip label="Good reply">
+            <Tooltip label={t.goodReply}>
               <button
                 type="button"
                 className={cx("tf-msg-act", fb[0] === "up" && "on")}
                 aria-pressed={fb[0] === "up"}
-                aria-label="Good reply"
+                aria-label={t.goodReply}
                 onClick={() => {
                   fb[1](fb[0] === "up" ? null : "up");
                   p.onFeedback && p.onFeedback("up");
@@ -332,12 +336,12 @@ export function ChatMessage(p: ChatMessageProps) {
                 <Icon name="thumbUp" size={14} />
               </button>
             </Tooltip>
-            <Tooltip label="Bad reply">
+            <Tooltip label={t.badReply}>
               <button
                 type="button"
                 className={cx("tf-msg-act", fb[0] === "down" && "on")}
                 aria-pressed={fb[0] === "down"}
-                aria-label="Bad reply"
+                aria-label={t.badReply}
                 onClick={() => {
                   fb[1](fb[0] === "down" ? null : "down");
                   p.onFeedback && p.onFeedback("down");
@@ -363,6 +367,7 @@ const TOOL_ICON: Record<string, IconName | null> = {
 };
 
 export function ToolCall(p: ToolCallProps) {
+  const t = useStrings(CHAT_STRINGS);
   const open = React.useState(!!p.defaultOpen),
     st = p.status || "done";
   return (
@@ -392,13 +397,13 @@ export function ToolCall(p: ToolCallProps) {
         <div className="tf-tool-body">
           {p.input != null && (
             <div>
-              <span className="tf-tool-label">{"Input"}</span>
+              <span className="tf-tool-label">{t.toolInput}</span>
               <pre>{typeof p.input === "string" ? p.input : JSON.stringify(p.input, null, 2)}</pre>
             </div>
           )}
           {p.output != null && (
             <div>
-              <span className="tf-tool-label">{st === "error" ? "Error" : "Result"}</span>
+              <span className="tf-tool-label">{st === "error" ? t.toolError : t.toolResult}</span>
               <pre className={st === "error" ? "err" : undefined}>
                 {typeof p.output === "string" ? p.output : JSON.stringify(p.output, null, 2)}
               </pre>
@@ -411,6 +416,7 @@ export function ToolCall(p: ToolCallProps) {
 }
 
 export function Reasoning(p: ReasoningProps) {
+  const t = useStrings(CHAT_STRINGS);
   const open = React.useState(!!p.defaultOpen);
   return (
     <div className={cx("tf-reason", open[0] && "open", p.streaming && "live")}>
@@ -423,7 +429,7 @@ export function Reasoning(p: ReasoningProps) {
         }}
       >
         <Icon name="sparkle" size={13} />
-        {p.streaming ? "Thinking…" : `Thought for ${p.duration || "a few seconds"}`}
+        {p.streaming ? t.thinking : t.thoughtFor(p.duration)}
         <Icon name="chevronDown" size={13} className="tf-tool-chev" />
       </button>
       {open[0] && (
@@ -470,6 +476,7 @@ export function PromptStarters(p: PromptStartersProps) {
 }
 
 export function ModelPicker(p: ModelPickerProps) {
+  const t = useStrings(CHAT_STRINGS);
   const models = p.models || [],
     cur = models.find((m) => m.id === p.value) || models[0] || {};
   return (
@@ -493,7 +500,7 @@ export function ModelPicker(p: ModelPickerProps) {
     >
       {(s) => (
         <div className="tf-menu tf-menu-static" role="menu">
-          <div className="tf-menu-label">{"Model"}</div>
+          <div className="tf-menu-label">{t.model}</div>
           {models.map((m) => (
             <button
               key={m.id}
@@ -520,6 +527,7 @@ export function ModelPicker(p: ModelPickerProps) {
 }
 
 export function Composer(p: ComposerProps) {
+  const t = useStrings(CHAT_STRINGS);
   const fileRef = React.useRef<HTMLInputElement>(null);
   const ta = React.useRef<HTMLTextAreaElement>(null),
     v = useControlled(p.value, "", p.onChange),
@@ -559,7 +567,7 @@ export function Composer(p: ComposerProps) {
     >
       {cmds.length > 0 && (
         <div className="tf-popover tf-composer-cmds top" role="listbox">
-          <div className="tf-menu-label">{"Commands"}</div>
+          <div className="tf-menu-label">{t.commands}</div>
           {cmds.map((c, i) => (
             <button
               key={c.name}
@@ -592,7 +600,7 @@ export function Composer(p: ComposerProps) {
               {p.onRemoveAttachment && (
                 <button
                   type="button"
-                  aria-label={`Remove ${f.name}`}
+                  aria-label={t.removeItem(f.name)}
                   onClick={() => {
                     p.onRemoveAttachment?.(i);
                   }}
@@ -608,8 +616,8 @@ export function Composer(p: ComposerProps) {
         ref={ta}
         rows={1}
         className="tf-composer-input"
-        placeholder={p.placeholder || "Message…"}
-        aria-label={p.label || p.placeholder || "Message"}
+        placeholder={p.placeholder || t.messagePlaceholder}
+        aria-label={p.label || p.placeholder || t.message}
         value={v[0]}
         disabled={p.disabled}
         onChange={(e) => {
@@ -642,11 +650,11 @@ export function Composer(p: ComposerProps) {
       />
       <div className="tf-composer-bar">
         {p.onAttach && (
-          <Tooltip label="Attach files">
+          <Tooltip label={t.attachFiles}>
             <button
               type="button"
               className="tf-composer-tool"
-              aria-label="Attach files"
+              aria-label={t.attachFiles}
               onClick={() => fileRef.current?.click()}
             >
               <Icon name="paperclip" size={16} />
@@ -665,11 +673,11 @@ export function Composer(p: ComposerProps) {
           </Tooltip>
         )}
         {p.commands && (
-          <Tooltip label="Commands" shortcut="/">
+          <Tooltip label={t.commands} shortcut="/">
             <button
               type="button"
               className="tf-composer-tool"
-              aria-label="Commands"
+              aria-label={t.commands}
               onClick={() => {
                 v[1]("/");
                 ta.current && ta.current.focus();
@@ -681,18 +689,16 @@ export function Composer(p: ComposerProps) {
         )}
         {p.models && <ModelPicker models={p.models} value={p.model} onChange={p.onModel} />}
         {p.left}
-        <span className="tf-composer-hint">
-          {p.hint != null ? p.hint : "Enter to send · Shift+Enter for a new line"}
-        </span>
+        <span className="tf-composer-hint">{p.hint != null ? p.hint : t.composerHint}</span>
         {p.busy ? (
-          <button type="button" className="tf-send stop" aria-label="Stop" onClick={p.onStop}>
+          <button type="button" className="tf-send stop" aria-label={t.stop} onClick={p.onStop}>
             <span className="tf-stop-sq" />
           </button>
         ) : (
           <button
             type="button"
             className="tf-send"
-            aria-label="Send"
+            aria-label={t.send}
             disabled={!v[0].trim() && !files.length}
             onClick={send}
           >
@@ -714,11 +720,12 @@ const AGENT_TONE: Record<string, Tone> = {
 };
 
 export function AgentStatus(p: AgentStatusProps) {
+  const t = useStrings(CHAT_STRINGS);
   const s = p.status || "Idle";
   return (
     <span className="tf-agentstatus">
       <Badge tone={AGENT_TONE[s] || "neutral"} live={s === "Running" || s === "Thinking"}>
-        {s}
+        {t.agentStatus[s] ?? s}
       </Badge>
       {p.step && <span className="tf-agentstatus-step">{p.step}</span>}
     </span>
@@ -736,6 +743,8 @@ const TRACE_ICON: Record<string, IconName> = {
 };
 
 export function RunTrace(p: RunTraceProps) {
+  const t = useStrings(CHAT_STRINGS);
+  const { formatNumber } = useFormat();
   const steps = p.steps || [],
     total = steps.reduce((a, s) => Math.max(a, (s.start || 0) + (s.ms || 0)), 1),
     sel = React.useState(p.defaultOpen != null ? p.defaultOpen : null);
@@ -747,8 +756,8 @@ export function RunTrace(p: RunTraceProps) {
   return (
     <div className="tf-trace">
       <div className="tf-trace-head">
-        <span>{"Step"}</span>
-        <span>{`Timeline · ${fms(total)}`}</span>
+        <span>{t.step}</span>
+        <span>{t.timeline(fms(total))}</span>
       </div>
       {steps.map((s, i) => {
         const open = sel[0] === i,
@@ -777,7 +786,7 @@ export function RunTrace(p: RunTraceProps) {
                     width: Math.max(1.5, ((s.ms || 0) / total) * 100) + "%",
                   }}
                 />
-                <em>{st === "running" ? "running…" : fms(s.ms || 0)}</em>
+                <em>{st === "running" ? t.stepRunning : fms(s.ms || 0)}</em>
               </span>
             </button>
             {open && s.detail && (
@@ -794,12 +803,13 @@ export function RunTrace(p: RunTraceProps) {
 }
 
 export function UsageMeter(p: UsageMeterProps) {
+  const t = useStrings(CHAT_STRINGS);
   const pct = Math.min(100, ((p.used || 0) / (p.limit || 1)) * 100),
     tone = pct >= 90 ? "blush" : pct >= 70 ? "butter" : "mint";
   return (
     <div className="tf-usage">
       <div className="tf-usage-top">
-        <span>{p.label || "Context"}</span>
+        <span>{p.label || t.context}</span>
         <b>{(p.format || String)(p.used) + " / " + (p.format || String)(p.limit)}</b>
       </div>
       <span className="tf-usage-track">