| 134 | }; |
| 135 | |
| 136 | export const ToolOutput = ({ |
| 137 | className, |
| 138 | output, |
| 139 | errorText, |
| 140 | ...props |
| 141 | }: ToolOutputProps) => { |
| 142 | if (!(output || errorText)) { |
| 143 | return null; |
| 144 | } |
| 145 | |
| 146 | let Output = <div>{output as ReactNode}</div>; |
| 147 | |
| 148 | if (typeof output === "object" && !isValidElement(output)) { |
| 149 | Output = ( |
| 150 | <CodeBlock code={JSON.stringify(output, null, 2)} language="json" /> |
| 151 | ); |
| 152 | } else if (typeof output === "string") { |
| 153 | Output = <CodeBlock code={output} language="json" />; |
| 154 | } |
| 155 | |
| 156 | return ( |
| 157 | <div className={cn("space-y-2", className)} {...props}> |
| 158 | <h4 className="font-medium text-muted-foreground text-xs uppercase tracking-wide"> |
| 159 | {errorText ? "Error" : "Result"} |
| 160 | </h4> |
| 161 | <div |
| 162 | className={cn( |
| 163 | "overflow-x-auto rounded-md text-xs [&_table]:w-full", |
| 164 | errorText |
| 165 | ? "bg-destructive/10 text-destructive" |
| 166 | : "bg-muted/50 text-foreground" |
| 167 | )} |
| 168 | > |
| 169 | {errorText && <div>{errorText}</div>} |
| 170 | {Output} |
| 171 | </div> |
| 172 | </div> |
| 173 | ); |
| 174 | }; |