Skip to content

Commit 537fbdb

Browse files
Sg312Sg312
committed
UI fixes
1 parent 3460a7b commit 537fbdb

File tree

2 files changed

+149
-64
lines changed

2 files changed

+149
-64
lines changed

‎apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-modal/copilot-modal.tsx‎

Lines changed: 85 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,17 @@
11
'use client'
22

33
import { type KeyboardEvent, useEffect, useRef } from 'react'
4-
import { ArrowUp, Bot, X } from 'lucide-react'
4+
import { ArrowUp, Bot, ChevronDown, MessageSquarePlus, MoreHorizontal, Trash2, X } from 'lucide-react'
55
import { Button } from '@/components/ui/button'
66
import { Input } from '@/components/ui/input'
7+
import {
8+
DropdownMenu,
9+
DropdownMenuContent,
10+
DropdownMenuItem,
11+
DropdownMenuTrigger,
12+
} from '@/components/ui/dropdown-menu'
713
import { createLogger } from '@/lib/logs/console-logger'
14+
import { type CopilotChat } from '@/lib/copilot-api'
815

916
const logger = createLogger('CopilotModal')
1017

@@ -129,6 +136,12 @@ interface CopilotModalProps {
129136
messages: Message[]
130137
onSendMessage: (message: string) => Promise<void>
131138
isLoading: boolean
139+
// Chat management props
140+
chats: CopilotChat[]
141+
currentChat: CopilotChat | null
142+
onSelectChat: (chat: CopilotChat) => void
143+
onStartNewChat: () => void
144+
onDeleteChat: (chatId: string) => void
132145
}
133146

134147
export function CopilotModal({
@@ -139,6 +152,11 @@ export function CopilotModal({
139152
messages,
140153
onSendMessage,
141154
isLoading,
155+
chats,
156+
currentChat,
157+
onSelectChat,
158+
onStartNewChat,
159+
onDeleteChat,
142160
}: CopilotModalProps) {
143161
const messagesEndRef = useRef<HTMLDivElement>(null)
144162
const messagesContainerRef = useRef<HTMLDivElement>(null)
@@ -202,9 +220,72 @@ export function CopilotModal({
202220
}
203221
`}</style>
204222

205-
{/* Header with title and close button */}
206-
<div className='flex items-center justify-between px-4 py-3'>
207-
<h2 className='font-medium text-lg'>Documentation Copilot</h2>
223+
{/* Header with chat title, management, and close button */}
224+
<div className='flex items-center justify-between px-4 py-3 border-b'>
225+
<div className='flex items-center gap-2 flex-1'>
226+
{/* Chat Title Dropdown */}
227+
<DropdownMenu>
228+
<DropdownMenuTrigger asChild>
229+
<Button
230+
variant='ghost'
231+
className='h-8 px-3 justify-start flex-1 max-w-[300px]'
232+
>
233+
<span className='truncate'>
234+
{currentChat?.title || 'New Chat'}
235+
</span>
236+
<ChevronDown className='h-4 w-4 ml-2 shrink-0' />
237+
</Button>
238+
</DropdownMenuTrigger>
239+
<DropdownMenuContent align='start' className='w-64 z-[110]' sideOffset={8}>
240+
{chats.map((chat) => (
241+
<div key={chat.id} className='flex items-center'>
242+
<DropdownMenuItem
243+
onClick={() => onSelectChat(chat)}
244+
className='flex-1 cursor-pointer'
245+
>
246+
<div className='min-w-0 flex-1'>
247+
<div className='truncate font-medium text-sm'>
248+
{chat.title || 'Untitled Chat'}
249+
</div>
250+
<div className='text-muted-foreground text-xs'>
251+
{chat.messageCount} messages •{' '}
252+
{new Date(chat.updatedAt).toLocaleDateString()}
253+
</div>
254+
</div>
255+
</DropdownMenuItem>
256+
<DropdownMenu>
257+
<DropdownMenuTrigger asChild>
258+
<Button variant='ghost' size='sm' className='h-8 w-8 shrink-0 p-0'>
259+
<MoreHorizontal className='h-4 w-4' />
260+
</Button>
261+
</DropdownMenuTrigger>
262+
<DropdownMenuContent align='end' className='z-[120]'>
263+
<DropdownMenuItem
264+
onClick={() => onDeleteChat(chat.id)}
265+
className='cursor-pointer text-destructive'
266+
>
267+
<Trash2 className='mr-2 h-4 w-4' />
268+
Delete
269+
</DropdownMenuItem>
270+
</DropdownMenuContent>
271+
</DropdownMenu>
272+
</div>
273+
))}
274+
</DropdownMenuContent>
275+
</DropdownMenu>
276+
277+
{/* New Chat Button */}
278+
<Button
279+
variant='ghost'
280+
size='sm'
281+
onClick={onStartNewChat}
282+
className='h-8 w-8 p-0'
283+
title='New Chat'
284+
>
285+
<MessageSquarePlus className='h-4 w-4' />
286+
</Button>
287+
</div>
288+
208289
<Button
209290
variant='ghost'
210291
size='icon'

‎apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx‎

Lines changed: 64 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -451,71 +451,70 @@ export const Copilot = forwardRef<CopilotRef, CopilotProps>(
451451
return (
452452
<>
453453
<div className='flex h-full flex-col'>
454-
{/* Header with Chat Dropdown */}
454+
{/* Header with Chat Title and Management */}
455455
<div className='border-b p-4'>
456456
<div className='flex items-center justify-between'>
457-
<div className='flex items-center gap-2'>
458-
<Bot className='h-5 w-5 text-primary' />
459-
<div>
460-
<h3 className='font-medium text-sm'>Documentation Copilot</h3>
461-
<p className='text-muted-foreground text-xs'>Ask questions about Sim Studio</p>
462-
</div>
463-
</div>
464-
465-
{/* Chat Management */}
466-
<div className='flex items-center gap-2'>
467-
<Button variant='outline' size='sm' onClick={startNewChat} className='h-8'>
468-
<MessageSquarePlus className='mr-2 h-4 w-4' />
469-
New Chat
470-
</Button>
471-
472-
{chats.length > 0 && (
473-
<DropdownMenu>
474-
<DropdownMenuTrigger asChild>
475-
<Button variant='outline' size='sm' className='h-8'>
476-
{currentChat?.title || 'Select Chat'}
477-
<ChevronDown className='ml-2 h-4 w-4' />
478-
</Button>
479-
</DropdownMenuTrigger>
480-
<DropdownMenuContent align='end' className='w-64'>
481-
{chats.map((chat) => (
482-
<div key={chat.id} className='flex items-center'>
457+
{/* Chat Title Dropdown */}
458+
<DropdownMenu>
459+
<DropdownMenuTrigger asChild>
460+
<Button
461+
variant='ghost'
462+
className='h-8 px-3 flex-1 justify-start min-w-0'
463+
>
464+
<span className='truncate'>
465+
{currentChat?.title || 'New Chat'}
466+
</span>
467+
<ChevronDown className='h-4 w-4 ml-2 shrink-0' />
468+
</Button>
469+
</DropdownMenuTrigger>
470+
<DropdownMenuContent align='start' className='w-64 z-[110]' sideOffset={8}>
471+
{chats.map((chat) => (
472+
<div key={chat.id} className='flex items-center'>
473+
<DropdownMenuItem
474+
onClick={() => selectChat(chat)}
475+
className='flex-1 cursor-pointer'
476+
>
477+
<div className='min-w-0 flex-1'>
478+
<div className='truncate font-medium text-sm'>
479+
{chat.title || 'Untitled Chat'}
480+
</div>
481+
<div className='text-muted-foreground text-xs'>
482+
{chat.messageCount} messages •{' '}
483+
{new Date(chat.updatedAt).toLocaleDateString()}
484+
</div>
485+
</div>
486+
</DropdownMenuItem>
487+
<DropdownMenu>
488+
<DropdownMenuTrigger asChild>
489+
<Button variant='ghost' size='sm' className='h-8 w-8 shrink-0 p-0'>
490+
<MoreHorizontal className='h-4 w-4' />
491+
</Button>
492+
</DropdownMenuTrigger>
493+
<DropdownMenuContent align='end' className='z-[120]'>
483494
<DropdownMenuItem
484-
onClick={() => selectChat(chat)}
485-
className='flex-1 cursor-pointer'
495+
onClick={() => handleDeleteChat(chat.id)}
496+
className='cursor-pointer text-destructive'
486497
>
487-
<div className='min-w-0 flex-1'>
488-
<div className='truncate font-medium text-sm'>
489-
{chat.title || 'Untitled Chat'}
490-
</div>
491-
<div className='text-muted-foreground text-xs'>
492-
{chat.messageCount} messages •{' '}
493-
{new Date(chat.updatedAt).toLocaleDateString()}
494-
</div>
495-
</div>
498+
<Trash2 className='mr-2 h-4 w-4' />
499+
Delete
496500
</DropdownMenuItem>
497-
<DropdownMenu>
498-
<DropdownMenuTrigger asChild>
499-
<Button variant='ghost' size='sm' className='h-8 w-8 shrink-0 p-0'>
500-
<MoreHorizontal className='h-4 w-4' />
501-
</Button>
502-
</DropdownMenuTrigger>
503-
<DropdownMenuContent align='end'>
504-
<DropdownMenuItem
505-
onClick={() => handleDeleteChat(chat.id)}
506-
className='cursor-pointer text-destructive'
507-
>
508-
<Trash2 className='mr-2 h-4 w-4' />
509-
Delete
510-
</DropdownMenuItem>
511-
</DropdownMenuContent>
512-
</DropdownMenu>
513-
</div>
514-
))}
515-
</DropdownMenuContent>
516-
</DropdownMenu>
517-
)}
518-
</div>
501+
</DropdownMenuContent>
502+
</DropdownMenu>
503+
</div>
504+
))}
505+
</DropdownMenuContent>
506+
</DropdownMenu>
507+
508+
{/* New Chat Button */}
509+
<Button
510+
variant='ghost'
511+
size='sm'
512+
onClick={startNewChat}
513+
className='h-8 w-8 p-0 ml-2'
514+
title='New Chat'
515+
>
516+
<MessageSquarePlus className='h-4 w-4' />
517+
</Button>
519518
</div>
520519
</div>
521520

@@ -586,6 +585,11 @@ export const Copilot = forwardRef<CopilotRef, CopilotProps>(
586585
messages={modalMessages}
587586
onSendMessage={handleModalSendMessage}
588587
isLoading={isLoading}
588+
chats={chats}
589+
currentChat={currentChat}
590+
onSelectChat={selectChat}
591+
onStartNewChat={startNewChat}
592+
onDeleteChat={handleDeleteChat}
589593
/>
590594
</>
591595
)

0 commit comments

Comments
 (0)