268112f96e
**Problem:** - Tool playground was only showing partial output - When 'complete' event arrived, it replaced streamed text with final output - Output was displayed as plain text instead of formatted markdown **Changes:** - Fixed streaming bug in ToolPlayground component - Removed line that overwrote accumulated text on 'complete' event - Now preserves all streamed chunks for full output display - Added react-markdown with GitHub Flavored Markdown support - Install react-markdown and remark-gfm packages - Added @tailwindcss/typography plugin for prose styling - Replaced plain <pre> with <ReactMarkdown> component - Applied prose classes for proper markdown formatting - Added type="button" to button elements for accessibility **Files changed:** - apps/web/src/components/ToolPlayground.tsx - Comment out setOutput(data.output) on complete event - Import ReactMarkdown and remarkGfm - Replace pre element with ReactMarkdown component - Add prose styling classes - Add type="button" to buttons - apps/web/tailwind.config.ts - Add @tailwindcss/typography plugin **Result:** - Full streamed output now displays correctly - Markdown is rendered with proper formatting (headings, lists, code blocks, etc.) - Better UX for AI-generated tool responses 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
51 lines
1.4 KiB
JSON
51 lines
1.4 KiB
JSON
{
|
|
"name": "@tpmjs/web",
|
|
"version": "0.0.0",
|
|
"private": true,
|
|
"scripts": {
|
|
"dev": "next dev",
|
|
"build": "next build",
|
|
"start": "next start",
|
|
"lint": "eslint .",
|
|
"type-check": "tsc --noEmit",
|
|
"clean": "rm -rf .next .turbo"
|
|
},
|
|
"dependencies": {
|
|
"@ai-sdk/openai": "3.0.0-beta.74",
|
|
"@tpmjs/db": "workspace:*",
|
|
"@tpmjs/env": "workspace:*",
|
|
"@tpmjs/npm-client": "workspace:*",
|
|
"@tpmjs/package-executor": "workspace:*",
|
|
"@tpmjs/types": "workspace:*",
|
|
"@tpmjs/ui": "workspace:*",
|
|
"@tpmjs/utils": "workspace:*",
|
|
"@types/react-syntax-highlighter": "^15.5.13",
|
|
"ai": "6.0.0-beta.124",
|
|
"next": "^16.0.4",
|
|
"next-themes": "^0.4.6",
|
|
"openai": "^6.9.1",
|
|
"react": "^19.0.0",
|
|
"react-dom": "^19.0.0",
|
|
"react-markdown": "^10.1.0",
|
|
"react-syntax-highlighter": "^16.1.0",
|
|
"rehype-raw": "^7.0.0",
|
|
"rehype-sanitize": "^6.0.0",
|
|
"remark-gfm": "^4.0.1",
|
|
"zod": "^4.0.0"
|
|
},
|
|
"devDependencies": {
|
|
"@tailwindcss/typography": "^0.5.19",
|
|
"@tpmjs/eslint-config": "workspace:*",
|
|
"@tpmjs/tailwind-config": "workspace:*",
|
|
"@tpmjs/tsconfig": "workspace:*",
|
|
"@types/node": "^22.10.2",
|
|
"@types/react": "^19.0.2",
|
|
"@types/react-dom": "^19.0.2",
|
|
"autoprefixer": "^10.4.20",
|
|
"eslint": "^9.39.1",
|
|
"eslint-config-next": "^16.0.4",
|
|
"postcss": "^8.5.1",
|
|
"tailwindcss": "^3.4.17",
|
|
"typescript": "^5.9.3"
|
|
}
|
|
}
|