✨ Modern GUI Improvements: Claude-like Artifacts & Enhanced Chat Inte…#71
✨ Modern GUI Improvements: Claude-like Artifacts & Enhanced Chat Inte…#71Jackson57279 wants to merge 1 commit intomainfrom
Conversation
…rface - Added modern CodeArtifact component with Claude-style code previews - Created EnhancedChatMessage with expandable code blocks and modern UI - Updated chat interface to use new artifact system - Added glass morphism effects and modern gradients - Implemented interactive code execution with E2B integration - Enhanced visual hierarchy with improved typography and spacing - Added smooth animations and hover effects throughout This transforms the chat interface to look and feel like modern AI tools with beautiful code artifact previews and enhanced user experience.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughReplaces ChatMessage with EnhancedChatMessage in EnhancedChatInterface, adds a new EnhancedChatMessage component with code-block parsing, metadata, diagram actions, and clipboard handling, introduces a CodeArtifact widget for executing/displaying code results, and overhauls index.css with a modernized theme, tokens, utilities, and chat/code artifact styles. Changes
Sequence Diagram(s)sequenceDiagram
actor U as User
participant CI as EnhancedChatInterface
participant EM as EnhancedChatMessage
participant CA as CodeArtifact
participant EX as executeCode()
U->>CI: View conversation
CI->>EM: Render message {isUser, isFirstInGroup, formatTimestamp, copyToClipboard, ...}
EM->>EM: Parse content (text + code blocks)
EM->>CA: Render each code block {code, language, onExecute=executeCode}
U->>CA: Click Run
CA->>EX: onExecute(code, language)
EX-->>CA: ExecutionResult | Error
CA-->>EM: Update active tab/status
U->>EM: Copy text / toggle metadata
EM-->>CI: Optional diagram actions (onApproveDiagram / onRequestDiagramChanges)
sequenceDiagram
participant CI as EnhancedChatInterface
participant EM as EnhancedChatMessage
participant DG as DiagramMessageComponent
CI->>EM: Render message with diagramData and handlers
EM->>DG: Show diagram UI
DG-->>EM: approve / requestChanges events
EM-->>CI: onApproveDiagram / onRequestDiagramChanges
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Suggested labels
Poem
Tip 🔌 Remote MCP (Model Context Protocol) integration is now available!Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats. ✨ Finishing Touches
🧪 Generate unit tests
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
|
Claude finished @otdoges's task —— View job 🔍 Code Review CompleteI've thoroughly reviewed this PR that adds modern GUI improvements with Claude-like artifacts and enhanced chat interface. Here's my comprehensive feedback: ✅ Strengths & Positive AspectsArchitecture & Design
Code Quality
|
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
| import { Card, CardContent } from '@/components/ui/card'; | ||
| import { Badge } from '@/components/ui/badge'; | ||
| import { Button } from '@/components/ui/button'; | ||
| import { ScrollArea } from '@/components/ui/scroll-area'; |
Check failure
Code scanning / ESLint
Disallow unused variables Error
| import { | ||
| Copy, | ||
| Check, | ||
| Play, |
Check failure
Code scanning / ESLint
Disallow unused variables Error
| Play, | ||
| Code2, | ||
| Sparkles, | ||
| FileText, |
Check failure
Code scanning / ESLint
Disallow unused variables Error
| Code2, | ||
| Sparkles, | ||
| FileText, | ||
| Image, |
Check failure
Code scanning / ESLint
Disallow unused variables Error
| Sparkles, | ||
| FileText, | ||
| Image, | ||
| Terminal, |
Check failure
Code scanning / ESLint
Disallow unused variables Error
| Maximize2, | ||
| Minimize2, | ||
| RotateCcw, | ||
| Settings, |
Check failure
Code scanning / ESLint
Disallow unused variables Error
| Settings, | ||
| Eye, | ||
| EyeOff, | ||
| ChevronDown, |
Check failure
Code scanning / ESLint
Disallow unused variables Error
| Eye, | ||
| EyeOff, | ||
| ChevronDown, | ||
| ChevronUp, |
Check failure
Code scanning / ESLint
Disallow unused variables Error
| EyeOff, | ||
| ChevronDown, | ||
| ChevronUp, | ||
| ExternalLink |
Check failure
Code scanning / ESLint
Disallow unused variables Error
| }, 500); | ||
| return () => clearTimeout(t); | ||
| } | ||
| }, [autoRun]); |
Check warning
Code scanning / ESLint
verifies the list of dependencies for Hooks like useEffect and similar Warning
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (4)
src/components/EnhancedChatInterface.tsx (4)
353-371: Gate UI by auth state: loading spinner, sign-in prompt, then protected content.Guideline violation for pages/components: handle
authLoading, unauthenticated, and authenticated states explicitly.- return ( - <ErrorBoundary> - <div className="min-h-screen ... + if (authLoading) { + return ( + <div className="min-h-screen grid place-items-center text-muted-foreground"> + <div className="flex items-center gap-3"> + <div className="w-5 h-5 border-2 border-white/20 border-t-white rounded-full animate-spin" /> + <span>Loading your workspace…</span> + </div> + </div> + ); + } + + if (!user) { + return ( + <div className="min-h-screen grid place-items-center"> + <div className="glass p-6 rounded-xl text-center space-y-3"> + <h2 className="text-lg font-semibold">Please sign in</h2> + <p className="text-sm text-muted-foreground">Sign in to view and manage your chats.</p> + </div> + </div> + ); + } + + return ( + <ErrorBoundary> + <div className="min-h-screen ...
159-167: Sanitize user input before storing and displaying.You validate but don’t sanitize. The security guidelines require
sanitizeTextto prevent XSS and malicious patterns.- const userInput = input.trim(); + const userInput = input.trim(); + const sanitizedInput = sanitizeText(userInput); ... - await createMessageMutation({ + await createMessageMutation({ chatId: currentChatId as Id<'chats'>, - content: userInput, + content: sanitizedInput, role: 'user' });Also import
sanitizeText:-import { validateInput, MAX_MESSAGE_LENGTH } from '@/utils/security'; +import { validateInput, MAX_MESSAGE_LENGTH, sanitizeText } from '@/utils/security';Also applies to: 181-186
470-473: Sanitize external links from web search to restrict protocol to http/https.
result.urloriginates from a remote service. Preventjavascript:or other dangerous schemes.- <a href={result.url} target="_blank" rel="noopener noreferrer" + <a + href={(() => { + try { + const u = new URL(result.url); + return u.protocol === 'http:' || u.protocol === 'https:' ? u.toString() : '#'; + } catch { + return '#'; + } + })()} + target="_blank" + rel="noopener noreferrer" className="text-xs text-blue-400 hover:text-blue-300 transition-colors"> {result.url} </a>
100-106: Remove client-provideduserIdfrom chat queries and mutationsThe Convex backend for chats and messages derives the authenticated user’s ID via
ctx.auth.getUserIdentity()(i.e.identity.subject), and none of thegetUserChats,getChatMessages, orcreateChatfunctions accept auserIdargument. PassinguserIdfrom the client is both redundant and poses a security risk if server-side checks ever change.Please update
src/components/EnhancedChatInterface.tsxat the following locations:
- Lines 100–106 (initial
useQueryforgetUserChats)- Lines 125–129 (first
createChatMutationinvocation)- Lines 174–179 (any other
createChatMutationcalls passinguserId)Apply this diff:
--- a/src/components/EnhancedChatInterface.tsx +++ b/src/components/EnhancedChatInterface.tsx @@ -100,7 +100,7 @@ - const chats = useQuery(api.chats.getUserChats, user ? { userId: user.id } : 'skip'); + const chats = useQuery(api.chats.getUserChats, user ? {} : 'skip'); const messages = useQuery( api.messages.getChatMessages, @@ -125,9 +125,7 @@ - const chatId = await createChatMutation({ - userId: user.id, - title: "New Chat" - }); + const chatId = await createChatMutation({ title: "New Chat" }); // …later in the code… - currentChatId = await createChatMutation({ - userId: user.id, - title: "New Chat" - }); + currentChatId = await createChatMutation({ title: "New Chat" });This ensures that all user scoping is enforced via the server’s auth context rather than client parameters.
🧹 Nitpick comments (10)
src/index.css (2)
133-140:.glass-hover:hoveris also duplicated with different visual values; remove the earlier block or merge for consistency.Two hover definitions with different gradients, borders, and shadows produce inconsistent results across the file.
Prefer the more comprehensive “Enhanced button hover effects” block. Remove the earlier hover rules:
-.glass-hover:hover { - background: linear-gradient(135deg, hsl(0 0% 100% / 0.08) 0%, hsl(0 0% 100% / 0.04) 100%); - border-color: hsl(0 0% 100% / 0.15); - transform: translateY(-1px); - box-shadow: - 0 8px 24px -4px hsl(0 0% 0% / 0.25), - 0 0 0 1px hsl(0 0% 100% / 0.05); -}Also applies to: 487-497
91-101: Backdrop/Mask effects lack reduced-motion and progressive enhancement fallbacks.Heavy
backdrop-filterand mask-composite usage can impact performance and accessibility. Add a reduced-motion override and a graceful fallback.Add these styles near the end of the file (outside current hunks):
@media (prefers-reduced-motion: reduce) { .animate-gradient, .animate-pulse-glow, .animate-float, .animate-slide-up, .animate-slide-in-right { animation: none !important; } } @supports not (backdrop-filter: blur(1px)) { .glass, .glass-elevated, .chat-bubble-assistant, .chat-input, .code-artifact-container { background: hsl(0 0% 6% / 0.98); /* solid fallback */ } }Also applies to: 118-127, 365-377, 396-417
src/components/EnhancedChatInterface.tsx (2)
412-417: Clipboard write lacks error handling; add try/catch and user feedback for permission denials.Calling
navigator.clipboard.writeTextmay fail (permissions, insecure context). Provide resilient UX.- copyToClipboard={async (text: string, messageId: string) => { - await navigator.clipboard.writeText(text); - setCopiedMessage(messageId); - setTimeout(() => setCopiedMessage(null), 2000); - toast.success('Message copied to clipboard!'); - }} + copyToClipboard={async (text: string, messageId: string) => { + try { + await navigator.clipboard.writeText(text); + setCopiedMessage(messageId); + setTimeout(() => setCopiedMessage(null), 2000); + toast.success('Message copied to clipboard!'); + } catch (err) { + toast.error('Copy failed. Your browser may have blocked clipboard access.'); + } + }}
97-98: UnusedabortControllerRef; either wire it to streaming or remove.Dead code adds confusion. If
streamAIResponsesupports abort, pass the controller to it and cancel on unmount.I can help thread the controller through
streamAIResponseand add a “Stop generating” UX.src/components/chat/EnhancedChatMessage.tsx (1)
6-23: Prune unused imports to satisfy ESLint and reduce bundle size.
ScrollArea,Play,FileText,Image,Terminal, andtoastare imported but unused per static analysis.-import { ScrollArea } from '@/components/ui/scroll-area'; ... -import { - Copy, - Check, - Play, - Code2, - Sparkles, - FileText, - Image, - Terminal, - ChevronDown, - ChevronUp -} from 'lucide-react'; +import { Copy, Check, Code2, Sparkles, ChevronDown, ChevronUp } from 'lucide-react'; -import { toast } from 'sonner';src/components/ui/code-artifact.tsx (5)
118-123: Clipboard copy should be resilient; catch errors and provide feedback.Avoid silent failures when clipboard API is unavailable or blocked.
- const handleCopy = () => { - navigator.clipboard.writeText(code); - setCopied(true); - toast.success('Code copied to clipboard!'); - setTimeout(() => setCopied(false), 2000); - }; + const handleCopy = async () => { + try { + await navigator.clipboard.writeText(code); + setCopied(true); + toast.success('Code copied to clipboard!'); + setTimeout(() => setCopied(false), 2000); + } catch { + toast.error('Copy failed. Your browser may have blocked clipboard access.'); + } + };
1-8: Trim unused imports and prefer explicit component typing.Several icons and
AnimatePresenceare unused; also preferReact.FCtyping for exported components per guidelines.-import React, { useState, useRef, useEffect } from 'react'; -import { motion, AnimatePresence } from 'framer-motion'; +import React, { useState, useRef, useEffect } from 'react'; +import { motion } from 'framer-motion'; ... -import { - Play, - Loader2, - CheckCircle, - XCircle, - Terminal, - FileText, - Image, - BarChart, - Sparkles, - Code2, - Zap, - Download, - Copy, - Check, - Maximize2, - Minimize2, - RotateCcw, - Settings, - Eye, - EyeOff, - ChevronDown, - ChevronUp, - ExternalLink -} from 'lucide-react'; +import { Play, Loader2, CheckCircle, XCircle, Terminal, FileText, Sparkles, Code2, Download, Copy, Check, Maximize2, Minimize2, Eye, EyeOff } from 'lucide-react';And update the export to an explicit React component type:
-export function CodeArtifact({ +export const CodeArtifact: React.FC<CodeArtifactProps> = ({ code, language, title = "Code Preview", description, onExecute, autoRun = false, showLineNumbers = true, className = "" -}: CodeArtifactProps) { +}) => {Also applies to: 9-33
73-75: Narrow union types for internal state and Tabs value.Use a literal union for
activeTabto prevent typos and improve type safety.- const [activeTab, setActiveTab] = useState('preview'); + const [activeTab, setActiveTab] = useState<'preview' | 'output' | 'logs' | 'error'>('preview'); ... - <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full"> + <Tabs value={activeTab} onValueChange={(v) => setActiveTab(v as typeof activeTab)} className="w-full">Also applies to: 254-255
232-250: Optional: Add aria-labels to icon-only buttons for accessibility.Improves screen reader usability without altering visuals.
- <Button + <Button aria-label={showPreview ? 'Hide preview' : 'Show preview'} ... - <Button + <Button aria-label="Copy code" ... - <Button + <Button aria-label={isExpanded ? 'Collapse code' : 'Expand code'} ... - <Button + <Button aria-label="Run code"
161-170: Consider disabling Run until the sandbox is ready or provide retry guidance.
executeCodemay fail if the E2B sandbox isn’t initialized. Expose a prop likedisabledor accept anonExecutewrapper from the parent to coordinate readiness.I can adjust
EnhancedChatMessageto accept anonExecuteprop and pass a wrapper that checkssandboxReadyfromEnhancedChatInterface, disabling the Run button and showing a toast until ready.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (4)
src/components/EnhancedChatInterface.tsx(2 hunks)src/components/chat/EnhancedChatMessage.tsx(1 hunks)src/components/ui/code-artifact.tsx(1 hunks)src/index.css(8 hunks)
🧰 Additional context used
📓 Path-based instructions (7)
**/{pages,components}/**/*.tsx
📄 CodeRabbit Inference Engine (.cursor/rules/authentication-patterns.mdc)
Handle all authentication states in components by showing a loading spinner when loading, a sign-in prompt when unauthenticated, and protected content when authenticated.
Files:
src/components/ui/code-artifact.tsxsrc/components/chat/EnhancedChatMessage.tsxsrc/components/EnhancedChatInterface.tsx
**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/convex-security.mdc)
**/*.{ts,tsx}: All Convex queries and mutations MUST use proper authentication. Never accept user IDs from client parameters.
Always verify user owns the data before allowing access.
Use the authenticated user's identity.subject for user references.
Implement proper error messages that don't leak information.
Authentication verification in every function.
Authorization checks for data ownership.
Input validation and sanitization.
Error handling without information leakage.
**/*.{ts,tsx}: Use Sonner for toast notifications to provide consistent user feedback, including success, error, and loading states.
Always handle errors gracefully using try-catch blocks in asynchronous functions, providing user feedback and logging errors.
Provide specific, actionable error messages for form validation errors using toast notifications.
Handle common network error scenarios in catch blocks, providing appropriate toast messages for network errors, authentication errors, and unexpected errors.If using TypeScript, use an enum to store flag names.
Strict TypeScript must be used with no 'any' types allowed
**/*.{ts,tsx}: NEVER useanytype - use proper TypeScript types
Useunknownfor truly unknown data types
Implement proper interface definitions
Do not use empty interfaces; use a type alias instead (e.g.,type InputProps = ...instead ofinterface InputProps {})
All function parameters must be typed
All return types should be explicit for public APIs
Use proper generic constraints
Implement discriminated unions for state management
Use proper interface definitions for error handling types (e.g.,interface ValidationResult { isValid: boolean; error?: string; })
**/*.{ts,tsx}: Always sanitize user input before storing or displaying using a sanitization function likesanitizeText.
Implement comprehensive input validation, including length checks and detection of malicious patterns, as shown in thevalidateInputfunction.
Define and use security constants suc...
Files:
src/components/ui/code-artifact.tsxsrc/components/chat/EnhancedChatMessage.tsxsrc/components/EnhancedChatInterface.tsx
**/*.tsx
📄 CodeRabbit Inference Engine (.cursor/rules/error-handling.mdc)
**/*.tsx: Always provide loading feedback to users during asynchronous operations.
Use proper error boundaries to handle component crashes and display user-friendly error UI.Use proper React component typing (e.g.,
const MyComponent: React.FC<Props> = ...)
**/*.tsx: Use theSafeTextReact component for all user-generated content to ensure safe text display.
NEVER usedangerouslySetInnerHTMLwith user content.
NEVER use direct string interpolation in HTML with user content.
Files:
src/components/ui/code-artifact.tsxsrc/components/chat/EnhancedChatMessage.tsxsrc/components/EnhancedChatInterface.tsx
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/posthog-integration.mdc)
**/*.{js,jsx,ts,tsx}: Use a consistent naming convention for this storage. enum/const object members should be written UPPERCASE_WITH_UNDERSCORE.
If a custom property for a person or event is at any point referenced in two or more files or two or more callsites in the same file, use an enum or const object, as above in feature flags.
Files:
src/components/ui/code-artifact.tsxsrc/components/chat/EnhancedChatMessage.tsxsrc/components/EnhancedChatInterface.tsx
src/components/**/*.tsx
📄 CodeRabbit Inference Engine (.cursor/rules/project-overview.mdc)
Input sanitization and validation must be implemented throughout the codebase to provide XSS protection
Files:
src/components/ui/code-artifact.tsxsrc/components/chat/EnhancedChatMessage.tsxsrc/components/EnhancedChatInterface.tsx
src/**/*.tsx
📄 CodeRabbit Inference Engine (CLAUDE.md)
src/**/*.tsx: Use React Hook Form with Zod validation for client-side forms
Prevent XSS by sanitizing any user-generated content before rendering (avoid unsafe HTML, or sanitize it)
Implement proper error handling with typed error boundaries in React
Files:
src/components/ui/code-artifact.tsxsrc/components/chat/EnhancedChatMessage.tsxsrc/components/EnhancedChatInterface.tsx
**/*ChatInterface*.tsx
📄 CodeRabbit Inference Engine (.cursor/rules/chat-ui-patterns.mdc)
Chat interfaces should follow the specified component structure: state management for selectedChatId, input, isTyping; useQuery for chats and messages; layout with ChatSidebar and ChatArea components.
Files:
src/components/EnhancedChatInterface.tsx
🧠 Learnings (9)
📚 Learning: 2025-08-09T23:03:01.787Z
Learnt from: CR
PR: otdoges/zapdev#0
File: .cursor/rules/chat-ui-patterns.mdc:0-0
Timestamp: 2025-08-09T23:03:01.787Z
Learning: Applies to **/*.{tsx} : Use Framer Motion's <AnimatePresence> and <motion.div> for animating message appearance and disappearance in chat UIs.
Applied to files:
src/components/chat/EnhancedChatMessage.tsxsrc/components/EnhancedChatInterface.tsx
📚 Learning: 2025-08-09T23:03:01.787Z
Learnt from: CR
PR: otdoges/zapdev#0
File: .cursor/rules/chat-ui-patterns.mdc:0-0
Timestamp: 2025-08-09T23:03:01.787Z
Learning: Applies to **/*ChatInterface*.tsx : Chat interfaces should follow the specified component structure: state management for selectedChatId, input, isTyping; useQuery for chats and messages; layout with ChatSidebar and ChatArea components.
Applied to files:
src/components/chat/EnhancedChatMessage.tsxsrc/components/EnhancedChatInterface.tsx
📚 Learning: 2025-08-09T23:03:01.787Z
Learnt from: CR
PR: otdoges/zapdev#0
File: .cursor/rules/chat-ui-patterns.mdc:0-0
Timestamp: 2025-08-09T23:03:01.787Z
Learning: Applies to **/*.{tsx} : Show typing indicators during AI responses in chat interfaces.
Applied to files:
src/components/chat/EnhancedChatMessage.tsxsrc/components/EnhancedChatInterface.tsx
📚 Learning: 2025-08-09T23:03:01.787Z
Learnt from: CR
PR: otdoges/zapdev#0
File: .cursor/rules/chat-ui-patterns.mdc:0-0
Timestamp: 2025-08-09T23:03:01.787Z
Learning: Applies to **/*.{tsx} : For assistant messages, extract code blocks from message content and render them using a CodeBlock component.
Applied to files:
src/components/chat/EnhancedChatMessage.tsx
📚 Learning: 2025-08-09T23:03:01.787Z
Learnt from: CR
PR: otdoges/zapdev#0
File: .cursor/rules/chat-ui-patterns.mdc:0-0
Timestamp: 2025-08-09T23:03:01.787Z
Learning: Applies to **/*.{tsx} : Provide copy-to-clipboard functionality for chat messages.
Applied to files:
src/components/chat/EnhancedChatMessage.tsxsrc/components/EnhancedChatInterface.tsx
📚 Learning: 2025-08-09T23:03:01.787Z
Learnt from: CR
PR: otdoges/zapdev#0
File: .cursor/rules/chat-ui-patterns.mdc:0-0
Timestamp: 2025-08-09T23:03:01.787Z
Learning: Applies to **/*.{tsx} : Implement auto-scroll to bottom on new messages in chat interfaces.
Applied to files:
src/components/chat/EnhancedChatMessage.tsxsrc/components/EnhancedChatInterface.tsx
📚 Learning: 2025-08-09T23:03:01.787Z
Learnt from: CR
PR: otdoges/zapdev#0
File: .cursor/rules/chat-ui-patterns.mdc:0-0
Timestamp: 2025-08-09T23:03:01.787Z
Learning: Applies to **/*.{tsx} : Render messages safely using a SafeText component inside a div with 'whitespace-pre-wrap' to preserve formatting.
Applied to files:
src/components/chat/EnhancedChatMessage.tsx
📚 Learning: 2025-08-12T03:04:41.047Z
Learnt from: CR
PR: otdoges/zapdev#0
File: CLAUDE.md:0-0
Timestamp: 2025-08-12T03:04:41.047Z
Learning: Applies to tailwind.config.* : Configure Tailwind to include dark mode, custom color system, and primary brand color #3E6FF3
Applied to files:
src/index.css
📚 Learning: 2025-08-09T23:03:15.789Z
Learnt from: CR
PR: otdoges/zapdev#0
File: .cursor/rules/error-handling.mdc:0-0
Timestamp: 2025-08-09T23:03:15.789Z
Learning: Applies to **/*.tsx : Use proper error boundaries to handle component crashes and display user-friendly error UI.
Applied to files:
src/components/EnhancedChatInterface.tsx
🧬 Code Graph Analysis (3)
src/components/ui/code-artifact.tsx (5)
src/components/ui/card.tsx (4)
Card(79-79)CardHeader(79-79)CardTitle(79-79)CardContent(79-79)src/components/ui/badge.tsx (1)
Badge(36-36)src/components/ui/button.tsx (1)
Button(164-164)src/components/ui/tabs.tsx (4)
Tabs(53-53)TabsList(53-53)TabsTrigger(53-53)TabsContent(53-53)src/components/ui/scroll-area.tsx (1)
ScrollArea(46-46)
src/components/chat/EnhancedChatMessage.tsx (2)
src/components/ui/code-artifact.tsx (1)
CodeArtifact(60-427)src/components/DiagramMessageComponent.tsx (1)
DiagramMessageComponent(23-105)
src/components/EnhancedChatInterface.tsx (1)
src/components/chat/EnhancedChatMessage.tsx (1)
EnhancedChatMessage(52-272)
🪛 ESLint
src/components/ui/code-artifact.tsx
[error] 2-2: 'AnimatePresence' is defined but never used.
(@typescript-eslint/no-unused-vars)
[error] 15-15: 'Image' is defined but never used.
(@typescript-eslint/no-unused-vars)
[error] 16-16: 'BarChart' is defined but never used.
(@typescript-eslint/no-unused-vars)
[error] 19-19: 'Zap' is defined but never used.
(@typescript-eslint/no-unused-vars)
[error] 25-25: 'RotateCcw' is defined but never used.
(@typescript-eslint/no-unused-vars)
[error] 26-26: 'Settings' is defined but never used.
(@typescript-eslint/no-unused-vars)
[error] 29-29: 'ChevronDown' is defined but never used.
(@typescript-eslint/no-unused-vars)
[error] 30-30: 'ChevronUp' is defined but never used.
(@typescript-eslint/no-unused-vars)
[error] 31-31: 'ExternalLink' is defined but never used.
(@typescript-eslint/no-unused-vars)
src/components/chat/EnhancedChatMessage.tsx
[error] 6-6: 'ScrollArea' is defined but never used.
(@typescript-eslint/no-unused-vars)
[error] 13-13: 'Play' is defined but never used.
(@typescript-eslint/no-unused-vars)
[error] 16-16: 'FileText' is defined but never used.
(@typescript-eslint/no-unused-vars)
[error] 17-17: 'Image' is defined but never used.
(@typescript-eslint/no-unused-vars)
[error] 18-18: 'Terminal' is defined but never used.
(@typescript-eslint/no-unused-vars)
[error] 22-22: 'toast' is defined but never used.
(@typescript-eslint/no-unused-vars)
[error] 68-68: Unsafe Regular Expression
(security/detect-unsafe-regex)
[error] 87-87: Unsafe Regular Expression
(security/detect-unsafe-regex)
[error] 263-263: Unexpected any. Specify a different type.
(@typescript-eslint/no-explicit-any)
1 participant
…rface
This transforms the chat interface to look and feel like modern AI tools with beautiful code artifact previews and enhanced user experience.
Summary by CodeRabbit
New Features
Style
Refactor