**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>
12 lines
356 B
TypeScript
12 lines
356 B
TypeScript
import baseConfig from '@tpmjs/tailwind-config/base';
|
|
import type { Config } from 'tailwindcss';
|
|
|
|
export default {
|
|
...baseConfig,
|
|
content: [
|
|
'./src/app/**/*.{ts,tsx}',
|
|
'./src/components/**/*.{ts,tsx}',
|
|
'../../packages/ui/src/**/*.ts',
|
|
],
|
|
plugins: [...(baseConfig.plugins || []), require('@tailwindcss/typography')],
|
|
} satisfies Config;
|