@seed-ship/mcp-ui-solid 6.19.1 → 6.20.0

package/src/components/VerifiedText.tsx

@@ -6,12 +6,14 @@
  *
  * Modes:
  * - highlight: ✅/⚠️ badges next to numbers (default)
- * - strip: replaces hallucinated numbers with [non vérifié]
+ * - strip: replaces hallucinated numbers with the `verifiedStripLabel`
+ *   chrome string ('[unverified]' by default)
  * - annotate: tooltip on hover with closest source number
  */
 
 import { createMemo, For } from 'solid-js'
 import type { DataValidation, HallucinatedNumber } from '../types/chat-bus'
+import { formatMCPUIString, useMCPUIStrings } from '../context/MCPUIStringsContext'
 
 export interface VerifiedTextProps {
   text: string
@@ -94,6 +96,7 @@ function buildAnnotatedSegments(text: string, validation: DataValidation): TextS
 }
 
 export function VerifiedText(props: VerifiedTextProps) {
+  const strings = useMCPUIStrings()
   const mode = () => props.mode || 'highlight'
 
   const segments = createMemo<TextSegment[]>(() => {
@@ -115,10 +118,10 @@ export function VerifiedText(props: VerifiedTextProps) {
             return (
               <span
                 class="inline-flex items-center gap-0.5 px-0.5 rounded bg-green-50 dark:bg-green-900/20 text-green-800 dark:text-green-300"
-                title="Verified against source data"
+                title={strings.verifiedTitle}
               >
                 {seg.content}
-                <span class="text-xs opacity-70" aria-label="verified">&#x2705;</span>
+                <span class="text-xs opacity-70" aria-label={strings.verifiedAria}>&#x2705;</span>
               </span>
             )
           }
@@ -127,9 +130,12 @@ export function VerifiedText(props: VerifiedTextProps) {
           const h = seg.item!
           const tooltipText = () => {
             if (h.closest != null && h.distance != null) {
-              return `Not found in source data. Closest: ${h.closest} (${Math.round(h.distance * 100)}% off)`
+              return formatMCPUIString(strings.verifiedNotFoundClosest, {
+                closest: h.closest,
+                pct: Math.round(h.distance * 100),
+              })
             }
-            return 'Not found in source data'
+            return strings.verifiedNotFound
           }
 
           if (mode() === 'strip') {
@@ -138,7 +144,7 @@ export function VerifiedText(props: VerifiedTextProps) {
                 class="inline-flex items-center px-1 rounded bg-amber-50 dark:bg-amber-900/20 text-amber-700 dark:text-amber-300 italic text-xs"
                 title={tooltipText()}
               >
-                [non v&eacute;rifi&eacute;]
+                {strings.verifiedStripLabel}
               </span>
             )
           }
@@ -151,7 +157,7 @@ export function VerifiedText(props: VerifiedTextProps) {
               role={props.onHallucinationClick ? 'button' : undefined}
             >
               {seg.content}
-              <span class="text-xs" aria-label="unverified">&#x26A0;&#xFE0F;</span>
+              <span class="text-xs" aria-label={strings.unverifiedAria}>&#x26A0;&#xFE0F;</span>
             </span>
           )
         }}
@@ -172,8 +178,12 @@ export function VerifiedText(props: VerifiedTextProps) {
             />
           </div>
           <span>
-            {Math.round(props.validation.confidence * 100)}% verified
-            ({props.validation.hallucinated.length} unverified)
+            {formatMCPUIString(strings.verifiedConfidence, {
+              pct: Math.round(props.validation.confidence * 100),
+            })}{' '}
+            {formatMCPUIString(strings.verifiedUnverifiedCount, {
+              count: props.validation.hallucinated.length,
+            })}
           </span>
         </div>
       )}

package/src/components/VideoRenderer.tsx

@@ -8,6 +8,7 @@
 import { Component, createMemo, Show } from 'solid-js'
 import type { UIComponent, VideoComponentParams } from '../types'
 import { ExpandableWrapper, useExpanded } from './ExpandableWrapper'
+import { useMCPUIStrings } from '../context/MCPUIStringsContext'
 
 export interface VideoRendererProps {
   /**
@@ -74,6 +75,7 @@ function parseVideoUrl(url: string): VideoInfo {
 }
 
 export const VideoRenderer: Component<VideoRendererProps> = (props) => {
+  const strings = useMCPUIStrings()
   const params = () => props.params || (props.component?.params as VideoComponentParams)
   const isExpanded = useExpanded()
 
@@ -135,9 +137,9 @@ export const VideoRenderer: Component<VideoRendererProps> = (props) => {
 
   return (
     <ExpandableWrapper
-      title={params()?.title || 'Video'}
+      title={params()?.title || strings.videoTitle}
       copyData={params()?.url || ''}
-      copyLabel="Copy video URL"
+      copyLabel={strings.videoCopy}
       toolbarVariant={props.toolbarVariant}
     >
     <div class={`w-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden ${
@@ -168,14 +170,14 @@ export const VideoRenderer: Component<VideoRendererProps> = (props) => {
               onError={handleVideoError}
             >
               <track kind="captions" />
-              Your browser does not support the video tag.
+              {strings.videoUnsupported}
             </video>
           }
         >
           {/* YouTube/Vimeo embed */}
           <iframe
             src={embedUrl()!}
-            title={params()?.title || 'Video'}
+            title={params()?.title || strings.videoTitle}
             class="absolute inset-0 w-full h-full"
             allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
             allowfullscreen

package/src/components/chart-data-table.ts

@@ -1,3 +1,44 @@
+import { formatMCPUIString } from '../utils/format-string';
+
+/**
+ * Column headers and series names of the accessible chart data table.
+ *
+ * `chartToDataTable` is a pure helper with no access to `MCPUIStrings`, so
+ * the wording is injected: it takes an optional trailing `labels` partial,
+ * which `ChartJSRenderer` feeds from `useMCPUIStrings()`. Left out, the
+ * English defaults below apply — the pre-v6.20.0 behaviour.
+ *
+ * `x` / `y` / `r` stay untranslated on purpose: they are the Chart.js point
+ * property NAMES the cells mirror, not prose.
+ *
+ * @since v6.20.0
+ */
+export interface ChartDataTableLabels {
+  /** Series column of the per-point table. */
+  series: string;
+  /** Point-index column of the per-point table. */
+  point: string;
+  /** Label column (categorical table, and per-point table when labelled). */
+  label: string;
+  /** Fallback dataset name. Template — `{n}`. */
+  seriesName: string;
+  /** Chart.js point property names — machine tokens, rarely overridden. */
+  x: string;
+  y: string;
+  r: string;
+}
+
+/** English defaults for {@link ChartDataTableLabels}. */
+export const CHART_DATA_TABLE_LABELS: ChartDataTableLabels = {
+  series: 'Series',
+  point: 'Point',
+  label: 'Label',
+  seriesName: 'Series {n}',
+  x: 'x',
+  y: 'y',
+  r: 'r',
+};
+
 export interface ChartDataTable {
   columns: string[];
   rows: Array<Array<string | number>>;
@@ -41,37 +82,41 @@ function isPoint(value: unknown): value is Record<string, unknown> {
  * coordinates. Categorical charts use a compact wide table; scatter, bubble,
  * and object-valued line charts use one row per point so x/y/r remain distinct.
  */
-export function chartToDataTable(params: ChartDataLike): ChartDataTable {
+export function chartToDataTable(
+  params: ChartDataLike,
+  labels?: Partial<ChartDataTableLabels>
+): ChartDataTable {
+  const l: ChartDataTableLabels = { ...CHART_DATA_TABLE_LABELS, ...labels };
   const datasets = params.data?.datasets ?? [];
-  const labels = params.data?.labels ?? [];
+  const dataLabels = params.data?.labels ?? [];
   const pointData =
     params.type === 'scatter' ||
     params.type === 'bubble' ||
     datasets.some((dataset) => dataset.data?.some(isPoint));
 
   if (pointData) {
-    const hasLabels = labels.length > 0;
+    const hasLabels = dataLabels.length > 0;
     const hasRadius =
       params.type === 'bubble' ||
       datasets.some((dataset) => dataset.data?.some((value) => isPoint(value) && 'r' in value));
     const columns = [
-      'Series',
-      'Point',
-      ...(hasLabels ? ['Label'] : []),
-      'x',
-      'y',
-      ...(hasRadius ? ['r'] : []),
+      l.series,
+      l.point,
+      ...(hasLabels ? [l.label] : []),
+      l.x,
+      l.y,
+      ...(hasRadius ? [l.r] : []),
     ];
     const rows: Array<Array<string | number>> = [];
 
     datasets.forEach((dataset, datasetIndex) => {
-      const series = dataset.label || `Series ${datasetIndex + 1}`;
+      const series = dataset.label || formatMCPUIString(l.seriesName, { n: datasetIndex + 1 });
       (dataset.data ?? []).forEach((value, pointIndex) => {
         const point = isPoint(value) ? value : { y: value };
         rows.push([
           series,
           pointIndex + 1,
-          ...(hasLabels ? [tableCell(labels[pointIndex])] : []),
+          ...(hasLabels ? [tableCell(dataLabels[pointIndex])] : []),
           tableCell(point.x),
           tableCell(point.y),
           ...(hasRadius ? [tableCell(point.r)] : []),
@@ -82,13 +127,22 @@ export function chartToDataTable(params: ChartDataLike): ChartDataTable {
     return { columns, rows };
   }
 
-  const rowCount = Math.max(labels.length, ...datasets.map((dataset) => dataset.data?.length ?? 0), 0);
-  const columns = ['Label', ...datasets.map((dataset, index) => dataset.label || `Series ${index + 1}`)];
+  const rowCount = Math.max(
+    dataLabels.length,
+    ...datasets.map((dataset) => dataset.data?.length ?? 0),
+    0
+  );
+  const columns = [
+    l.label,
+    ...datasets.map(
+      (dataset, index) => dataset.label || formatMCPUIString(l.seriesName, { n: index + 1 })
+    ),
+  ];
   const rows: Array<Array<string | number>> = [];
 
   for (let rowIndex = 0; rowIndex < rowCount; rowIndex += 1) {
     rows.push([
-      tableCell(labels[rowIndex] ?? rowIndex + 1),
+      tableCell(dataLabels[rowIndex] ?? rowIndex + 1),
       ...datasets.map((dataset) => tableCell(dataset.data?.[rowIndex])),
     ]);
   }

package/src/context/MCPActionContext.tsx

@@ -4,6 +4,7 @@
  */
 
 import { createContext, createSignal, useContext, ParentComponent, Accessor } from 'solid-js'
+import { useMCPUIStrings } from './MCPUIStringsContext'
 
 /**
  * Action request payload
@@ -223,6 +224,8 @@ const defaultExecutor = async (request: ActionRequest): Promise<ActionResult> =>
  * ```
  */
 export const MCPActionProvider: ParentComponent<MCPActionProviderProps> = (props) => {
+  // The error of a failed action can be rendered by FormRenderer.
+  const strings = useMCPUIStrings()
   const [isExecuting, setIsExecuting] = createSignal(false)
   const [lastResult, setLastResult] = createSignal<ActionResult>()
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -270,7 +273,7 @@ export const MCPActionProvider: ParentComponent<MCPActionProviderProps> = (props
     } catch (error) {
       const errorResult: ActionResult = {
         success: false,
-        error: error instanceof Error ? error.message : 'Unknown error',
+        error: error instanceof Error ? error.message : strings.errorUnknown,
         timestamp: new Date().toISOString(),
         toolName: request.toolName,
       }