- Removed

\n {oldStr || \"(empty)\"}\n

\n\n

+ Added

\n {newStr || \"(empty)\"}\n

\n );\n};\n\n// Helper to create markdown code blocks\nconst CodeBlock = ({ language, content }: { language: string; content: string }) => {\n // Use the triple backtick syntax for code blocks\n const codeBlock = \"```\" + language + \"\\n\" + content + \"\\n```\";\n return {codeBlock};\n};\n\n// Helper to check if a tool response is an error\nconst isErrorResponse = (response: any): boolean => {\n console.log(response);\n if (!response) return false;\n\n if (typeof response === \"object\" && response.type === \"error\") {\n return true;\n }\n\n return false;\n};\n\n// Helper to extract error message from response\nconst getErrorMessage = (response: any): string => {\n if (!response) return \"Unknown error\";\n\n if (typeof response === \"object\" && response.type === \"error\") {\n return response.message || \"Unknown error\";\n }\n\n return \"Unknown error\";\n};\n\n// Helper to extract success data from response\nconst getSuccessData = (response: any): any => {\n if (!response) return null;\n\n if (typeof response === \"object\" && response.type === \"success\") {\n return response.data;\n }\n\n // Legacy format - assume the entire response is the data\n return response;\n};\n\nexport function MessagePart({ part }: { part: NonNullable[number] }) {\n if (part.type === \"text\") return {part.text};\n if (part.type === \"reasoning\")\n return (\n

\n Reasoning...\n

\n {part.reasoning}\n {part.details && part.details.map((detail, index) => (\n

\n {detail.text}\n

\n ))}\n

\n );\n if (part.type === \"tool-invocation\") {\n let { step, state, toolName, args, result } = part.toolInvocation;\n const isError = isErrorResponse(result);\n\n // Properly conjugate command verbs to present participle form\n const getCommandVerb = (command: string): string => {\n switch (command) {\n case \"view\":\n return \"viewed\";\n case \"create\":\n return \"created\";\n case \"str_replace\":\n return \"replaced\";\n case \"insert\":\n return \"inserted\";\n case \"undo_edit\":\n return \"undid\";\n default:\n return command + \"-ed\"; // Fallback for unknown commands\n }\n };\n\n let name = toolName === \"str_replace_editor\"\n ? getCommandVerb(args.command) + \" \" + args.path + (args.view_range ? ` [${args.view_range.join(\", \")}]` : \"\")\n : toolName === \"change_val_type\"\n ? `changed trigger for ${args.path} to ${args.type}`\n : toolName;\n\n // Format based on tool type\n const renderToolContent = () => {\n // If there's an error, show the error message\n if (isError) {\n return (\n

\n {getErrorMessage(result)}\n

\n );\n }\n\n // Handle the \"think\" tool specially - using default font size\n if (toolName === \"think\" && args.thought) {\n return (\n

\n {args.thought}\n

\n );\n }\n\n // Handle str_replace_editor tool\n if (toolName === \"str_replace_editor\") {\n switch (args.command) {\n case \"str_replace\":\n return ;\n\n case \"create\":\n const language = detectLanguage(args.path);\n return (\n

\n Created: {args.path}\n {language}\n

\n {args.file_text}\n

\n );\n\n case \"view\":\n // For view operations, we don't need to show the full content in the tool call\n return (\n

\n Viewed: {args.path}\n {args.view_range ? ` (lines ${args.view_range.join(\" to \")})` : \"\"}\n

\n );\n\n case \"insert\":\n return (\n

\n Inserted at line {args.insert_line} in {args.path}\n

\n {args.new_str}\n

\n );\n\n case \"undo_edit\":\n return (\n

\n Undid last edit to {args.path}\n

\n );\n\n default:\n // Fallback to JSON for unknown commands\n return (\n

\n \n

\n );\n }\n }\n\n // Handle delete_file tool\n if (toolName === \"delete_file\" && args.path) {\n return (\n

\n Deleted file: {args.path}\n

\n );\n }\n\n // Handle change_val_type tool\n if (toolName === \"change_val_type\" && args.path && args.type) {\n // Get success data if available\n const successData = getSuccessData(result);\n \n // Determine appropriate styling based on trigger type\n let bgColor = \"bg-blue-50\";\n let textColor = \"text-blue-700\";\n let icon = \"🔄\";\n \n if (args.type === \"http\") {\n icon = \"🌐\";\n bgColor = \"bg-green-50\";\n textColor = \"text-green-700\";\n } else if (args.type === \"cron\") {\n icon = \"⏱️\";\n bgColor = \"bg-purple-50\";\n textColor = \"text-purple-700\";\n } else if (args.type === \"email\") {\n icon = \"📧\";\n bgColor = \"bg-yellow-50\";\n textColor = \"text-yellow-700\";\n } else if (args.type === \"none\") {\n icon = \"🚫\";\n bgColor = \"bg-gray-50\";\n textColor = \"text-gray-700\";\n }\n \n return (\n

\n {icon} Changed trigger type for {args.path} to {args.type}\n {args.type === \"cron\" && (\n

\n Note: Configure the cron schedule in the Val Town web UI\n

\n )}\n

\n );\n }\n\n // Default: format as JSON with markdown code block\n return (\n

\n \n

\n );\n };\n\n return (\n

\n \n {isError && \"❌ \"}\n {name}\n \n

\n {renderToolContent()}\n

\n );\n }\n if (part.type === \"source\") {\n return (\n

\n Source\n

\n \n

\n );\n }\n if (part.type === \"file\") {\n const fileContent = atob(part.data);\n const fileName = part.name || \"file\";\n const language = detectLanguage(fileName);\n\n return (\n

\n {fileName}\n {language}\n

\n \n

\n );\n }\n if (part.type === \"image\") {\n // Handle both formats: {image: {url: string}} and {image: string}\n const imageUrl = typeof part.image === \"string\"\n ? part.image\n : part.image.url || (part.image as any).source?.url;\n\n return (\n

\n \n

\n );\n }\n // Handle multiple images in a single part\n if (part.type === \"images\") {\n return img.url)} />;\n }\n}","deleted","label",[171,172,155],"frontend","components","permalink","https://www.val.town/x/tallesjp/OpenTownie/code/frontend/components/MessagePart.tsx","extension","actionData","errors"]