39 |
40 | {(!open || isMobileSidebar) && (
41 |
42 | )}
43 |
44 | {/* Desktop: Resizable panels (Do not render on mobile) */}
45 | {!isMobile && (
46 |
50 |
56 | {children}
57 |
58 |
59 | {renderPanel && (
60 | <>
61 |
62 |
70 |
71 |
72 | >
73 | )}
74 |
75 | )}
76 |
77 | {/* Mobile: full-width chat + drawer (Do not render on desktop) */}
78 | {isMobile && (
79 |
80 | {' '}
81 | {/* Responsive classes removed */}
82 | {children}
83 | {/* ArtifactDrawer checks isMobile internally, no double check needed */}
84 |
85 |
86 | )}
87 |
88 | )
89 | }
90 |
--------------------------------------------------------------------------------
/components/collapsible-message.tsx:
--------------------------------------------------------------------------------
1 | import { ChevronDown } from 'lucide-react'
2 |
3 | import { cn } from '@/lib/utils'
4 |
5 | import {
6 | Collapsible,
7 | CollapsibleContent,
8 | CollapsibleTrigger
9 | } from './ui/collapsible'
10 | import { IconLogo } from './ui/icons'
11 | import { Separator } from './ui/separator'
12 | import { CurrentUserAvatar } from './current-user-avatar'
13 |
14 | interface CollapsibleMessageProps {
15 | children: React.ReactNode
16 | role: 'user' | 'assistant'
17 | isCollapsible?: boolean
18 | isOpen?: boolean
19 | header?: React.ReactNode
20 | onOpenChange?: (open: boolean) => void
21 | showBorder?: boolean
22 | showIcon?: boolean
23 | }
24 |
25 | export function CollapsibleMessage({
26 | children,
27 | role,
28 | isCollapsible = false,
29 | isOpen = true,
30 | header,
31 | onOpenChange,
32 | showBorder = true,
33 | showIcon = true
34 | }: CollapsibleMessageProps) {
35 | const content =