@@ -34,37 +34,46 @@ export const MyThread: FC<MyThreadProps> = (props: MyThreadProps) => {
34
34
useRouterLogicUI ( ) ;
35
35
36
36
return (
37
- < ThreadPrimitive . Root className = "flex flex-col h-full relative" >
38
- < ThreadPrimitive . Viewport
39
- className = { cn (
40
- "flex-1 overflow-y-auto scroll-smooth bg-inherit px-4 pt-8 transition-all duration-300 ease-in-out w-full" ,
41
- isEmpty ? "pb-[50vh]" : "pb-32" ,
42
- ) }
43
- >
44
- < ThreadPrimitive . Messages
45
- components = { {
46
- UserMessage : MyUserMessage ,
47
- AssistantMessage : MyAssistantMessage ,
48
- } }
49
- />
50
- </ ThreadPrimitive . Viewport >
51
- < MyThreadScrollToBottom />
52
- { isEmpty ? (
53
- < div className = "absolute left-1/2 transform -translate-x-1/2 max-w-2xl top-1/2 -translate-y-[70%]" >
54
- < div className = "flex flex-row gap-1 items-center justify-center mb-[24px]" >
55
- < p className = "text-2xl" > Chat LangChain</ p >
56
- < NextImage
57
- src = "/images/lc_logo.jpg"
58
- className = "rounded-3xl"
59
- alt = "LangChain Logo"
60
- width = { 40 }
61
- height = { 40 }
37
+ < ThreadPrimitive . Root className = "flex flex-col h-full" >
38
+ { ! isEmpty ? (
39
+ < ThreadPrimitive . Viewport
40
+ className = { cn (
41
+ "flex-1 overflow-y-auto scroll-smooth bg-inherit transition-all duration-300 ease-in-out w-full" ,
42
+ isEmpty ? "pb-[30vh] sm:pb-[50vh]" : "pb-32 sm:pb-24" ,
43
+ "pr-3 md:pr-6" ,
44
+ "scrollbar-thin scrollbar-thumb-gray-600 scrollbar-track-transparent" , // Add custom scrollbar styling
45
+ ) }
46
+ >
47
+ < div className = "md:ml-24 ml-3 mt-2" >
48
+ < ThreadPrimitive . Messages
49
+ components = { {
50
+ UserMessage : MyUserMessage ,
51
+ AssistantMessage : MyAssistantMessage ,
52
+ } }
62
53
/>
63
54
</ div >
64
- < div className = "mb-[110px] ml-[30px]" >
65
- < SuggestedQuestions />
55
+ </ ThreadPrimitive . Viewport >
56
+ ) : null }
57
+ < MyThreadScrollToBottom />
58
+ { isEmpty ? (
59
+ < div className = "flex items-center justify-center flex-grow my-auto" >
60
+ < div className = "flex flex-col items-center" >
61
+ < div className = "flex flex-row gap-1 items-center justify-center mb-4 sm:mb-[24px]" >
62
+ < p className = "text-xl sm:text-2xl" > Chat LangChain</ p >
63
+ < NextImage
64
+ src = "/images/lc_logo.jpg"
65
+ className = "rounded-3xl"
66
+ alt = "LangChain Logo"
67
+ width = { 32 }
68
+ height = { 32 }
69
+ style = { { width : "auto" , height : "auto" } }
70
+ />
71
+ </ div >
72
+ < div className = "md:mb-8" >
73
+ < SuggestedQuestions />
74
+ </ div >
75
+ < MyComposer messages = { props . messages } />
66
76
</ div >
67
- < MyComposer messages = { props . messages } />
68
77
</ div >
69
78
) : (
70
79
< MyComposer messages = { props . messages } />
@@ -97,9 +106,9 @@ const MyComposer: FC<MyComposerProps> = (props: MyComposerProps) => {
97
106
return (
98
107
< ComposerPrimitive . Root
99
108
className = { cn (
100
- "focus-within:border-aui-ring/20 flex w-full items-center rounded-lg border px-2.5 py-2.5 shadow-sm transition-all duration-300 ease-in-out bg-[#282828] border-gray-600" ,
101
- "absolute transform bottom-4 ",
102
- ! isEmpty ? "left-[43 %] -translate-x-1/2 max-w-3xl" : " ",
109
+ "focus-within:border-aui-ring/20 flex w-full items-center md:justify-left justify-center rounded-lg border px-2.5 py-2.5 shadow-sm transition-all duration-300 ease-in-out bg-[#282828] border-gray-600" ,
110
+ isEmpty ? "" : "md:ml-24 ml-3 mb-6 ",
111
+ isEmpty ? "w-full" : "md:w-[70 %] w-full max-w-[832px] ",
103
112
) }
104
113
>
105
114
< ComposerPrimitive . Input
@@ -138,8 +147,8 @@ const MyComposer: FC<MyComposerProps> = (props: MyComposerProps) => {
138
147
139
148
const MyUserMessage : FC = ( ) => {
140
149
return (
141
- < MessagePrimitive . Root className = "w-full max-w-5xl pt-4 mx -auto" >
142
- < div className = "bg-inherit text-white max-w-3xl break-words rounded-3xl px-5 pt-2.5 mb-[-25px] text-4xl font-light" >
150
+ < MessagePrimitive . Root className = "pt-2 sm:pt-4 w-full max-w-4xl mr -auto" >
151
+ < div className = "bg-inherit text-white break-words rounded-2xl sm:rounded- 3xl px-3 md:px- 5 pt-2 md:pt-2 .5 mb-[-15px] sm:mb-[- 25px] text-2xl sm: text-4xl font-light" >
143
152
< MessagePrimitive . Content />
144
153
</ div >
145
154
</ MessagePrimitive . Root >
@@ -155,11 +164,11 @@ const MyAssistantMessage: FC = () => {
155
164
! isLast ;
156
165
157
166
return (
158
- < MessagePrimitive . Root className = "relative flex w-full max-w-5xl py-4 mx -auto" >
159
- < div className = "ml-6 bg-inherit text-white max-w-3xl break-words leading-7" >
167
+ < MessagePrimitive . Root className = "flex w-full max-w-4xl md: py-4 py-2 mr -auto" >
168
+ < div className = "ml-2 sm:ml- 6 bg-inherit text-white max-w-full sm:max-w- 3xl break-words leading-6 sm: leading-7" >
160
169
< MessagePrimitive . Content components = { { Text : MarkdownText } } />
161
170
{ shouldRenderMessageBreak ? (
162
- < hr className = "relative left-1/2 -translate-x-[37.25%] w-[45vw] mt-6 border-gray-600" />
171
+ < hr className = "relative left-1/2 -translate-x-1/2 w-[90vw] sm: w-[45vw] mt-4 sm: mt-6 border-gray-600" />
163
172
) : null }
164
173
</ div >
165
174
</ MessagePrimitive . Root >
0 commit comments