| 284 | } |
| 285 | |
| 286 | function formatRepoSetupOutput(output: any) { |
| 287 | return ( |
| 288 | <div className="space-y-2"> |
| 289 | {output?.repoName && ( |
| 290 | <div className="flex items-center gap-2"> |
| 291 | <span className="text-sm text-gray-400">Repository:</span> |
| 292 | <span className="text-sm text-gray-200 font-medium">{output.repoName}</span> |
| 293 | </div> |
| 294 | )} |
| 295 | {output?.framework && ( |
| 296 | <div className="flex items-center gap-2"> |
| 297 | <span className="text-sm text-gray-400">Framework:</span> |
| 298 | <span className="text-sm text-gray-200">{output.framework}</span> |
| 299 | </div> |
| 300 | )} |
| 301 | {output?.previewUrl && ( |
| 302 | <div className="flex items-center gap-2"> |
| 303 | <span className="text-sm text-gray-400">Preview URL:</span> |
| 304 | <a |
| 305 | href={output.previewUrl} |
| 306 | target="_blank" |
| 307 | rel="noopener noreferrer" |
| 308 | className="text-sm text-blue-400 hover:text-blue-300 underline" |
| 309 | > |
| 310 | {output.previewUrl} |
| 311 | </a> |
| 312 | </div> |
| 313 | )} |
| 314 | {output?.message && ( |
| 315 | <div className="mt-3 pt-3 border-t border-[#2a2a2a]"> |
| 316 | <p className="text-sm text-gray-300">{output.message}</p> |
| 317 | </div> |
| 318 | )} |
| 319 | </div> |
| 320 | ); |
| 321 | } |
| 322 | |
| 323 | // Main component |
| 324 | export function ToolInvocation({ invocation }: { invocation: BaseToolInvocation }) { |