Fable UI Core

1import * as React from "react"
2import type { ReactNode } from "react"
3 
4import {
5  getToolNameFromPart,
6  ToolPayloadError,
7  type FableToolRegistry,
8  type ToolPartLike,
9  type ToolRenderHandlers,
10} from "./definitions"
11 
12function UnknownToolPart({ name }: { name: string }) {
13  return (
14    <div className="rounded-md border bg-muted/40 p-4 text-sm text-muted-foreground">
15      Unknown Fable tool part: <code>{name}</code>
16    </div>
17  )
18}
19 
20function renderComponent(
21  Component: FableToolRegistry[string]["renderer"]["Component"],
22  props: Record<string, unknown>,
23) {
24  return (
25    <React.Suspense fallback={null}>
26      <Component {...props} />
27    </React.Suspense>
28  )
29}
30 
31export function renderFableToolPart({
32  part,
33  registry,
34  handlers = {},
35}: {
36  part: ToolPartLike
37  registry: FableToolRegistry
38  handlers?: ToolRenderHandlers
39}): ReactNode {
40  const toolName = getToolNameFromPart(part)
41  const def = toolName ? registry[toolName] : undefined
42 
43  if (!def) {
44    return <UnknownToolPart name={toolName ?? part.type} />
45  }
46 
47  const fableState = part.toolMetadata?.fableState
48  const isDisabled = fableState === "disabled"
49 
50  if (part.state === "input-streaming" || fableState === "loading") {
51    return renderComponent(def.renderer.Component, def.renderer.loadingProps)
52  }
53 
54  if (part.state === "output-error" || fableState === "error") {
55    return renderComponent(
56      def.renderer.Component,
57      def.renderer.errorProps(part.errorText || "The tool result could not be rendered."),
58    )
59  }
60 
61  if (fableState === "empty") {
62    return renderComponent(def.renderer.Component, def.renderer.emptyProps)
63  }
64 
65  const parsed = def.schema.safeParse(part.output ?? part.input)
66 
67  if (!parsed.success) {
68    return renderComponent(
69      def.renderer.Component,
70      def.renderer.errorProps("The tool result did not match the expected data contract."),
71    )
72  }
73 
74  try {
75    return renderComponent(
76      def.renderer.Component,
77      {
78        ...def.renderer.toProps(parsed.data, handlers),
79        isDisabled,
80      },
81    )
82  } catch (error) {
83    const description =
84      error instanceof ToolPayloadError ? error.message : "Unexpected error rendering component."
85 
86    return renderComponent(def.renderer.Component, def.renderer.errorProps(description))
87  }
88}
89 
90export function FableToolPart({
91  part,
92  registry,
93  handlers,
94}: {
95  part: ToolPartLike
96  registry: FableToolRegistry
97  handlers?: ToolRenderHandlers
98}) {
99// … truncated