feat(chat): enhance chat interface with markdown support
- Add markdown rendering with react-markdown and remark-gfm - Create ChatMessage component with code copy functionality - Add typing indicator animation during AI response - Create welcome screen for new users - Add Textarea component for multi-line input - Improve message styling with avatars and hover actions - Add Gateway connection status awareness - Add prose styling for markdown content
This commit is contained in:
Haze
142
build_process/commit_8_chat_interface.md
Normal file
142
build_process/commit_8_chat_interface.md
Normal file
@@ -0,0 +1,142 @@
|
||||
# Commit 8: Chat Interface
|
||||
|
||||
## Summary
|
||||
Enhance the chat interface with markdown rendering, typing indicators, welcome screen, and improved user experience for conversations with the AI assistant.
|
||||
|
||||
## Changes
|
||||
|
||||
### React Renderer
|
||||
|
||||
#### `src/pages/Chat/index.tsx`
|
||||
Complete rewrite with enhanced features:
|
||||
|
||||
**New Components:**
|
||||
- `ChatMessage` - Individual message with markdown support
|
||||
- `TypingIndicator` - Animated dots during AI response
|
||||
- `WelcomeScreen` - Onboarding screen for new users
|
||||
|
||||
**Features:**
|
||||
- Markdown rendering with react-markdown and remark-gfm
|
||||
- Code syntax highlighting with copy button
|
||||
- Auto-resizing textarea input
|
||||
- Gateway connection status awareness
|
||||
- Tool call status badges
|
||||
- Copy message content button
|
||||
- Shift+Enter for new lines
|
||||
|
||||
**UI Improvements:**
|
||||
- Gradient avatar for AI assistant
|
||||
- Rounded message bubbles
|
||||
- Hover actions (copy, etc.)
|
||||
- Responsive prose styling
|
||||
- Custom code block display
|
||||
|
||||
#### `src/components/ui/textarea.tsx` (New)
|
||||
Textarea component based on shadcn/ui:
|
||||
- Auto-resize support
|
||||
- Focus ring styling
|
||||
- Disabled state
|
||||
|
||||
#### `src/styles/globals.css`
|
||||
Added prose styling:
|
||||
- Markdown list formatting
|
||||
- Blockquote styling
|
||||
- Table formatting
|
||||
- Code block margins
|
||||
- Typing indicator animation
|
||||
|
||||
### Dependencies
|
||||
|
||||
#### `package.json`
|
||||
New dependencies:
|
||||
- `react-markdown@10.1.0` - Markdown rendering
|
||||
- `remark-gfm@4.0.1` - GitHub Flavored Markdown support
|
||||
|
||||
## Technical Details
|
||||
|
||||
### Message Rendering Flow
|
||||
|
||||
```
|
||||
Message Content
|
||||
|
|
||||
v
|
||||
Is User?
|
||||
|
|
||||
┌───┴───┐
|
||||
Yes No
|
||||
| |
|
||||
v v
|
||||
Plain ReactMarkdown
|
||||
Text |
|
||||
v
|
||||
remark-gfm
|
||||
|
|
||||
v
|
||||
Custom Components
|
||||
(code, links, etc.)
|
||||
```
|
||||
|
||||
### Markdown Components
|
||||
|
||||
| Element | Custom Handling |
|
||||
|---------|----------------|
|
||||
| `code` | Inline vs block detection, syntax highlighting label, copy button |
|
||||
| `a` | External link (new tab), primary color styling |
|
||||
| `pre` | Background styling, overflow scroll |
|
||||
| Lists | Proper indentation and spacing |
|
||||
| Tables | Border collapse, header background |
|
||||
| Blockquotes | Left border, muted color |
|
||||
|
||||
### Typing Indicator Animation
|
||||
|
||||
```css
|
||||
@keyframes bounce {
|
||||
0%, 60%, 100% { transform: translateY(0); }
|
||||
30% { transform: translateY(-4px); }
|
||||
}
|
||||
|
||||
/* Staggered delay for dots */
|
||||
.dot-1 { animation-delay: 0ms; }
|
||||
.dot-2 { animation-delay: 150ms; }
|
||||
.dot-3 { animation-delay: 300ms; }
|
||||
```
|
||||
|
||||
### Input Handling
|
||||
|
||||
**Key Combinations:**
|
||||
- `Enter` - Send message
|
||||
- `Shift+Enter` - New line
|
||||
- Auto-resize up to 200px max height
|
||||
|
||||
**State Management:**
|
||||
- Textarea value tracked in local state
|
||||
- Height recalculated on content change
|
||||
- Focus maintained after send
|
||||
|
||||
### Gateway Integration
|
||||
|
||||
**Connection Awareness:**
|
||||
- Warning banner when Gateway offline
|
||||
- Input disabled without connection
|
||||
- Fetch history only when connected
|
||||
- Error display for failed messages
|
||||
|
||||
### Welcome Screen Features
|
||||
|
||||
Quick start cards showing:
|
||||
- "Ask Questions" - General Q&A capability
|
||||
- "Creative Tasks" - Writing and brainstorming
|
||||
|
||||
Gradient branding with ClawX logo.
|
||||
|
||||
## UI/UX Considerations
|
||||
|
||||
1. **Message Alignment**: User messages right-aligned, AI left-aligned
|
||||
2. **Avatar Design**: Gradient for AI, solid for user
|
||||
3. **Hover Actions**: Progressive disclosure of copy buttons
|
||||
4. **Feedback**: Toast on code copy, visual state for copied
|
||||
5. **Loading States**: Typing indicator during AI response
|
||||
6. **Error Handling**: Inline error display with icon
|
||||
|
||||
## Version
|
||||
v0.1.0-alpha (incremental)
|
||||
@@ -13,6 +13,7 @@
|
||||
* [commit_5] Channel connection flows - Multi-channel support with QR/token connection UI
|
||||
* [commit_6] Auto-update functionality - electron-updater integration with UI
|
||||
* [commit_7] Packaging and distribution - CI/CD, multi-platform builds, icon generation
|
||||
* [commit_8] Chat interface - Markdown support, typing indicator, welcome screen
|
||||
|
||||
### Plan:
|
||||
1. ~~Initialize project structure~~ ✅
|
||||
@@ -22,7 +23,7 @@
|
||||
5. ~~Implement Channel connection flows~~ ✅
|
||||
6. ~~Add auto-update functionality~~ ✅
|
||||
7. ~~Packaging and distribution setup~~ ✅
|
||||
8. Chat interface
|
||||
8. ~~Chat interface~~ ✅
|
||||
9. Skills browser/enable page
|
||||
10. Cron tasks management
|
||||
|
||||
|
||||
@@ -2,7 +2,10 @@
|
||||
"name": "clawx",
|
||||
"version": "0.1.0",
|
||||
"pnpm": {
|
||||
"onlyBuiltDependencies": ["electron", "esbuild"]
|
||||
"onlyBuiltDependencies": [
|
||||
"electron",
|
||||
"esbuild"
|
||||
]
|
||||
},
|
||||
"description": "ClawX - Graphical AI Assistant based on OpenClaw",
|
||||
"main": "dist-electron/main/index.js",
|
||||
@@ -40,6 +43,8 @@
|
||||
"dependencies": {
|
||||
"electron-store": "^10.0.0",
|
||||
"electron-updater": "^6.3.9",
|
||||
"react-markdown": "^10.1.0",
|
||||
"remark-gfm": "^4.0.1",
|
||||
"ws": "^8.18.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
856
pnpm-lock.yaml
generated
856
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
22
src/components/ui/textarea.tsx
Normal file
22
src/components/ui/textarea.tsx
Normal file
@@ -0,0 +1,22 @@
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const Textarea = React.forwardRef<
|
||||
HTMLTextAreaElement,
|
||||
React.ComponentProps<"textarea">
|
||||
>(({ className, ...props }, ref) => {
|
||||
return (
|
||||
<textarea
|
||||
className={cn(
|
||||
"flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
||||
className
|
||||
)}
|
||||
ref={ref}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
})
|
||||
Textarea.displayName = "Textarea"
|
||||
|
||||
export { Textarea }
|
||||
@@ -2,49 +2,325 @@
|
||||
* Chat Page
|
||||
* Conversation interface with AI
|
||||
*/
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import { Send, Trash2, Bot, User } from 'lucide-react';
|
||||
import { useState, useEffect, useRef, useCallback } from 'react';
|
||||
import {
|
||||
Send,
|
||||
Trash2,
|
||||
Bot,
|
||||
User,
|
||||
Copy,
|
||||
Check,
|
||||
RefreshCw,
|
||||
AlertCircle,
|
||||
Sparkles,
|
||||
MessageSquare,
|
||||
} from 'lucide-react';
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
import remarkGfm from 'remark-gfm';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { useChatStore } from '@/stores/chat';
|
||||
import { useGatewayStore } from '@/stores/gateway';
|
||||
import { LoadingSpinner } from '@/components/common/LoadingSpinner';
|
||||
import { cn, formatRelativeTime } from '@/lib/utils';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
// Message component with markdown support
|
||||
interface ChatMessageProps {
|
||||
message: {
|
||||
id: string;
|
||||
role: 'user' | 'assistant' | 'system';
|
||||
content: string;
|
||||
timestamp: string;
|
||||
toolCalls?: Array<{
|
||||
id: string;
|
||||
name: string;
|
||||
arguments: Record<string, unknown>;
|
||||
result?: unknown;
|
||||
status: 'pending' | 'running' | 'completed' | 'error';
|
||||
}>;
|
||||
};
|
||||
}
|
||||
|
||||
function ChatMessage({ message }: ChatMessageProps) {
|
||||
const [copied, setCopied] = useState(false);
|
||||
const isUser = message.role === 'user';
|
||||
|
||||
const copyContent = useCallback(() => {
|
||||
navigator.clipboard.writeText(message.content);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
}, [message.content]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'flex gap-3 group',
|
||||
isUser ? 'flex-row-reverse' : 'flex-row'
|
||||
)}
|
||||
>
|
||||
{/* Avatar */}
|
||||
<div
|
||||
className={cn(
|
||||
'flex h-8 w-8 shrink-0 items-center justify-center rounded-full',
|
||||
isUser
|
||||
? 'bg-primary text-primary-foreground'
|
||||
: 'bg-gradient-to-br from-indigo-500 to-purple-600 text-white'
|
||||
)}
|
||||
>
|
||||
{isUser ? (
|
||||
<User className="h-4 w-4" />
|
||||
) : (
|
||||
<Sparkles className="h-4 w-4" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Message Content */}
|
||||
<div
|
||||
className={cn(
|
||||
'relative max-w-[80%] rounded-2xl px-4 py-3',
|
||||
isUser
|
||||
? 'bg-primary text-primary-foreground'
|
||||
: 'bg-muted'
|
||||
)}
|
||||
>
|
||||
{isUser ? (
|
||||
<p className="whitespace-pre-wrap">{message.content}</p>
|
||||
) : (
|
||||
<div className="prose prose-sm dark:prose-invert max-w-none">
|
||||
<ReactMarkdown
|
||||
remarkPlugins={[remarkGfm]}
|
||||
components={{
|
||||
// Custom code block styling
|
||||
code({ className, children, ...props }) {
|
||||
const match = /language-(\w+)/.exec(className || '');
|
||||
const isInline = !match && !className;
|
||||
|
||||
if (isInline) {
|
||||
return (
|
||||
<code className="bg-background/50 px-1.5 py-0.5 rounded text-sm font-mono" {...props}>
|
||||
{children}
|
||||
</code>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="relative group/code">
|
||||
{match && (
|
||||
<div className="absolute right-2 top-2 flex items-center gap-2">
|
||||
<span className="text-xs text-muted-foreground opacity-60">
|
||||
{match[1]}
|
||||
</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-6 w-6 opacity-0 group-hover/code:opacity-100 transition-opacity"
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(String(children));
|
||||
toast.success('Code copied!');
|
||||
}}
|
||||
>
|
||||
<Copy className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
<pre className="bg-background/50 rounded-lg p-4 overflow-x-auto">
|
||||
<code className={cn('text-sm font-mono', className)} {...props}>
|
||||
{children}
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
// Custom link styling
|
||||
a({ href, children }) {
|
||||
return (
|
||||
<a
|
||||
href={href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-primary hover:underline"
|
||||
>
|
||||
{children}
|
||||
</a>
|
||||
);
|
||||
},
|
||||
}}
|
||||
>
|
||||
{message.content}
|
||||
</ReactMarkdown>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Timestamp and actions */}
|
||||
<div className={cn(
|
||||
'flex items-center gap-2 mt-2',
|
||||
isUser ? 'justify-end' : 'justify-between'
|
||||
)}>
|
||||
<p
|
||||
className={cn(
|
||||
'text-xs',
|
||||
isUser
|
||||
? 'text-primary-foreground/70'
|
||||
: 'text-muted-foreground'
|
||||
)}
|
||||
>
|
||||
{formatRelativeTime(message.timestamp)}
|
||||
</p>
|
||||
|
||||
{!isUser && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-6 w-6 opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
onClick={copyContent}
|
||||
>
|
||||
{copied ? (
|
||||
<Check className="h-3 w-3 text-green-500" />
|
||||
) : (
|
||||
<Copy className="h-3 w-3" />
|
||||
)}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Tool Calls */}
|
||||
{message.toolCalls && message.toolCalls.length > 0 && (
|
||||
<div className="mt-3 space-y-2 border-t pt-2">
|
||||
<p className="text-xs font-medium text-muted-foreground">Tools Used:</p>
|
||||
{message.toolCalls.map((tool) => (
|
||||
<Card key={tool.id} className="bg-background/50">
|
||||
<CardContent className="p-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-xs font-medium">{tool.name}</p>
|
||||
<span className={cn(
|
||||
'text-xs px-1.5 py-0.5 rounded',
|
||||
tool.status === 'completed' && 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400',
|
||||
tool.status === 'running' && 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400',
|
||||
tool.status === 'error' && 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400',
|
||||
tool.status === 'pending' && 'bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-400'
|
||||
)}>
|
||||
{tool.status}
|
||||
</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Typing indicator component
|
||||
function TypingIndicator() {
|
||||
return (
|
||||
<div className="flex gap-3">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 text-white">
|
||||
<Sparkles className="h-4 w-4" />
|
||||
</div>
|
||||
<div className="bg-muted rounded-2xl px-4 py-3">
|
||||
<div className="flex gap-1">
|
||||
<span className="w-2 h-2 bg-muted-foreground/50 rounded-full animate-bounce" style={{ animationDelay: '0ms' }} />
|
||||
<span className="w-2 h-2 bg-muted-foreground/50 rounded-full animate-bounce" style={{ animationDelay: '150ms' }} />
|
||||
<span className="w-2 h-2 bg-muted-foreground/50 rounded-full animate-bounce" style={{ animationDelay: '300ms' }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Welcome screen component
|
||||
function WelcomeScreen() {
|
||||
return (
|
||||
<div className="flex h-full flex-col items-center justify-center text-center p-8">
|
||||
<div className="w-20 h-20 rounded-2xl bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center mb-6">
|
||||
<Bot className="h-10 w-10 text-white" />
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold mb-2">Welcome to ClawX Chat</h2>
|
||||
<p className="text-muted-foreground mb-8 max-w-md">
|
||||
I'm your AI assistant, ready to help with tasks, answer questions, and more.
|
||||
Start by typing a message below.
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4 max-w-lg w-full">
|
||||
{[
|
||||
{ icon: MessageSquare, title: 'Ask Questions', desc: 'Get answers on any topic' },
|
||||
{ icon: Sparkles, title: 'Creative Tasks', desc: 'Writing, brainstorming, ideas' },
|
||||
].map((item, i) => (
|
||||
<Card key={i} className="text-left">
|
||||
<CardContent className="p-4">
|
||||
<item.icon className="h-6 w-6 text-primary mb-2" />
|
||||
<h3 className="font-medium">{item.title}</h3>
|
||||
<p className="text-sm text-muted-foreground">{item.desc}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function Chat() {
|
||||
const { messages, loading, sending, fetchHistory, sendMessage, clearHistory } = useChatStore();
|
||||
const { messages, loading, sending, error, fetchHistory, sendMessage, clearHistory } = useChatStore();
|
||||
const gatewayStatus = useGatewayStore((state) => state.status);
|
||||
const [input, setInput] = useState('');
|
||||
const messagesEndRef = useRef<HTMLDivElement>(null);
|
||||
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
||||
|
||||
const isGatewayRunning = gatewayStatus.state === 'running';
|
||||
|
||||
// Fetch history on mount
|
||||
useEffect(() => {
|
||||
fetchHistory();
|
||||
}, [fetchHistory]);
|
||||
if (isGatewayRunning) {
|
||||
fetchHistory();
|
||||
}
|
||||
}, [fetchHistory, isGatewayRunning]);
|
||||
|
||||
// Auto-scroll to bottom on new messages
|
||||
useEffect(() => {
|
||||
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
|
||||
}, [messages]);
|
||||
}, [messages, sending]);
|
||||
|
||||
// Auto-resize textarea
|
||||
useEffect(() => {
|
||||
if (textareaRef.current) {
|
||||
textareaRef.current.style.height = 'auto';
|
||||
textareaRef.current.style.height = `${Math.min(textareaRef.current.scrollHeight, 200)}px`;
|
||||
}
|
||||
}, [input]);
|
||||
|
||||
// Handle send message
|
||||
const handleSend = async () => {
|
||||
if (!input.trim() || sending) return;
|
||||
const handleSend = useCallback(async () => {
|
||||
if (!input.trim() || sending || !isGatewayRunning) return;
|
||||
|
||||
const content = input.trim();
|
||||
setInput('');
|
||||
await sendMessage(content);
|
||||
};
|
||||
}, [input, sending, isGatewayRunning, sendMessage]);
|
||||
|
||||
// Handle key press
|
||||
const handleKeyPress = (e: React.KeyboardEvent) => {
|
||||
const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
handleSend();
|
||||
}
|
||||
};
|
||||
}, [handleSend]);
|
||||
|
||||
return (
|
||||
<div className="flex h-[calc(100vh-8rem)] flex-col">
|
||||
{/* Gateway Warning */}
|
||||
{!isGatewayRunning && (
|
||||
<div className="bg-yellow-50 dark:bg-yellow-900/20 border-b border-yellow-200 dark:border-yellow-800 px-4 py-3 flex items-center gap-3">
|
||||
<AlertCircle className="h-5 w-5 text-yellow-600 dark:text-yellow-400" />
|
||||
<span className="text-sm text-yellow-700 dark:text-yellow-300">
|
||||
Gateway is not running. Chat functionality is unavailable.
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Messages Area */}
|
||||
<div className="flex-1 overflow-auto p-4 space-y-4">
|
||||
{loading ? (
|
||||
@@ -52,112 +328,71 @@ export function Chat() {
|
||||
<LoadingSpinner size="lg" />
|
||||
</div>
|
||||
) : messages.length === 0 ? (
|
||||
<div className="flex h-full flex-col items-center justify-center text-muted-foreground">
|
||||
<Bot className="h-16 w-16 mb-4 opacity-50" />
|
||||
<h3 className="text-lg font-medium">No messages yet</h3>
|
||||
<p className="text-sm">Start a conversation with your AI assistant</p>
|
||||
</div>
|
||||
<WelcomeScreen />
|
||||
) : (
|
||||
<>
|
||||
{messages.map((message) => (
|
||||
<div
|
||||
key={message.id}
|
||||
className={cn(
|
||||
'flex gap-3',
|
||||
message.role === 'user' ? 'flex-row-reverse' : 'flex-row'
|
||||
)}
|
||||
>
|
||||
{/* Avatar */}
|
||||
<div
|
||||
className={cn(
|
||||
'flex h-8 w-8 shrink-0 items-center justify-center rounded-full',
|
||||
message.role === 'user'
|
||||
? 'bg-primary text-primary-foreground'
|
||||
: 'bg-muted'
|
||||
)}
|
||||
>
|
||||
{message.role === 'user' ? (
|
||||
<User className="h-4 w-4" />
|
||||
) : (
|
||||
<Bot className="h-4 w-4" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Message Content */}
|
||||
<div
|
||||
className={cn(
|
||||
'max-w-[80%] rounded-lg px-4 py-2',
|
||||
message.role === 'user'
|
||||
? 'bg-primary text-primary-foreground'
|
||||
: 'bg-muted'
|
||||
)}
|
||||
>
|
||||
<p className="whitespace-pre-wrap">{message.content}</p>
|
||||
<p
|
||||
className={cn(
|
||||
'mt-1 text-xs',
|
||||
message.role === 'user'
|
||||
? 'text-primary-foreground/70'
|
||||
: 'text-muted-foreground'
|
||||
)}
|
||||
>
|
||||
{formatRelativeTime(message.timestamp)}
|
||||
</p>
|
||||
|
||||
{/* Tool Calls */}
|
||||
{message.toolCalls && message.toolCalls.length > 0 && (
|
||||
<div className="mt-2 space-y-2">
|
||||
{message.toolCalls.map((tool) => (
|
||||
<Card key={tool.id} className="bg-background/50">
|
||||
<CardContent className="p-2">
|
||||
<p className="text-xs font-medium">
|
||||
Tool: {tool.name}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Status: {tool.status}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<ChatMessage key={message.id} message={message} />
|
||||
))}
|
||||
{sending && <TypingIndicator />}
|
||||
<div ref={messagesEndRef} />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Error Display */}
|
||||
{error && (
|
||||
<div className="px-4 py-2 bg-red-50 dark:bg-red-900/20 border-t border-red-200 dark:border-red-800">
|
||||
<p className="text-sm text-red-600 dark:text-red-400 flex items-center gap-2">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
{error}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Input Area */}
|
||||
<div className="border-t p-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="border-t p-4 bg-background">
|
||||
<div className="flex items-end gap-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={clearHistory}
|
||||
disabled={messages.length === 0}
|
||||
title="Clear history"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
|
||||
<Input
|
||||
value={input}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
onKeyPress={handleKeyPress}
|
||||
placeholder="Type a message..."
|
||||
disabled={sending}
|
||||
className="flex-1"
|
||||
/>
|
||||
<div className="flex-1 relative">
|
||||
<Textarea
|
||||
ref={textareaRef}
|
||||
value={input}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
placeholder={isGatewayRunning ? "Type a message... (Shift+Enter for new line)" : "Gateway not connected..."}
|
||||
disabled={sending || !isGatewayRunning}
|
||||
className="min-h-[44px] max-h-[200px] resize-none pr-12"
|
||||
rows={1}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Button onClick={handleSend} disabled={!input.trim() || sending}>
|
||||
<Button
|
||||
onClick={handleSend}
|
||||
disabled={!input.trim() || sending || !isGatewayRunning}
|
||||
size="icon"
|
||||
className="shrink-0"
|
||||
>
|
||||
{sending ? (
|
||||
<LoadingSpinner size="sm" className="text-primary-foreground" />
|
||||
<RefreshCw className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<Send className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<p className="text-xs text-muted-foreground mt-2 text-center">
|
||||
Press Enter to send, Shift+Enter for new line
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -95,3 +95,66 @@
|
||||
.focus-ring {
|
||||
@apply focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2;
|
||||
}
|
||||
|
||||
/* Prose styling for markdown */
|
||||
.prose {
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.prose p {
|
||||
margin-bottom: 0.75em;
|
||||
}
|
||||
|
||||
.prose p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.prose ul,
|
||||
.prose ol {
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
padding-left: 1.5em;
|
||||
}
|
||||
|
||||
.prose li {
|
||||
margin-bottom: 0.25em;
|
||||
}
|
||||
|
||||
.prose pre {
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.prose blockquote {
|
||||
border-left: 3px solid hsl(var(--border));
|
||||
padding-left: 1em;
|
||||
margin: 0.5em 0;
|
||||
color: hsl(var(--muted-foreground));
|
||||
}
|
||||
|
||||
.prose table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
|
||||
.prose th,
|
||||
.prose td {
|
||||
border: 1px solid hsl(var(--border));
|
||||
padding: 0.5em;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.prose th {
|
||||
background: hsl(var(--muted));
|
||||
}
|
||||
|
||||
/* Typing indicator animation */
|
||||
@keyframes bounce {
|
||||
0%, 60%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
30% {
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user