Skip to content

Commit b979af7

Browse files
iamprashantiamprashant
committed
feat: added change
1 parent e8a3f6d commit b979af7

1 file changed

Lines changed: 73 additions & 30 deletions

File tree

‎src/app/pages/v2/text/conversations/index.tsx‎

Lines changed: 73 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -54,19 +54,33 @@ export const ConversationMessages: FC<{
5454
</div>
5555
<div className="pks_flex pks_flex-col">
5656
<div className="pks_flex pks_items-center pks_gap-2">
57-
<span className="pks_text-gray-500 pks_mb-0.5 pks_text-[13px]">
57+
<span className="pks_text-gray-500 pks_mb-0.5 pks_text-[13px] pks_font-semibold">
5858
{deployment.name}
5959
</span>
6060
</div>
61-
<div className="pks_space-y-1 pks_text-[14px]">
61+
<div className="pks_text-[14px] pks_relative">
62+
<div
63+
style={{
64+
left: "-10px",
65+
background: theme.color,
66+
}}
67+
className="pks_bottom-[0px] pks_rounded-[20px] pks_absolute pks_w-6 pks_h-6"
68+
/>
69+
<div
70+
style={{
71+
left: "-16px",
72+
}}
73+
className="pks_bottom-[8px] -pks_left-[16px] pks_rounded-[40px] pks_absolute pks_bg-gray-100 pks_w-6 pks_h-6"
74+
/>
75+
6276
<motion.div
6377
initial="initial"
6478
animate="animate"
6579
exit="exit"
6680
style={{
6781
background: theme.color,
6882
}}
69-
className="pks_text-white pks_px-3 pks_py-2 pks_rounded-2xl pks_w-fit"
83+
className="pks_text-white pks_px-3 pks_py-2 pks_rounded-2xl pks_w-fit pks_relative"
7084
>
7185
<motion.div
7286
variants={{
@@ -103,7 +117,7 @@ export const ConversationMessages: FC<{
103117
"[&_:is(strong,h1,h2,h3,h4,h5,h6)]:pks_font-semibold",
104118
"[&_:is(h1)]:pks_text-2xl",
105119
"[&_:is(h2)]:pks_text-lg",
106-
"[&_:is(li)]:pks_py-2",
120+
"[&_:is(li)]:pks_py-0",
107121
"[&_:is(h3)]:pks_text-md",
108122
"[&_h1:not(:first-child)]:pks_mt-8",
109123
"[&_h1:not(:last-child)]:pks_mb-6",
@@ -120,28 +134,32 @@ export const ConversationMessages: FC<{
120134
</motion.div>
121135
</motion.div>
122136
</div>
137+
<div className="pks_flex pks_flex-col pks_space-y-2 pks_mt-2">
138+
{deployment.suggestionList.map((x, idx) => {
139+
return (
140+
<div
141+
key={`suggestion-key-${idx}`}
142+
style={{
143+
borderColor: theme.color,
144+
color: theme.color,
145+
}}
146+
onClick={() => {
147+
ctx?.onSendText(x);
148+
}}
149+
className="pks_backdrop-blur pks_bg-white pks_flex pks_items-center pks_justify-center pks_px-4 pks_py-2 pks_rounded-full pks_w-fit pks_border-[0.5px] pks_text-ms pks_text-sm hover:pks_bg-white/30 pks_font-medium pks_cursor-pointer"
150+
>
151+
<span className="pks_mr-1 pks_opacity-80">{x}</span>
152+
<ArrowRight
153+
className="pks_w-4 pks_h-4 pks_shrink-0"
154+
strokeWidth={1}
155+
/>
156+
</div>
157+
);
158+
})}
159+
</div>
123160
</div>
124161
</li>
125-
<li className="pks_flex pks_w-full pks_flex-col pks_px-4 pks_gap-2 pks_mb-4">
126-
{deployment.suggestionList.map((x, idx) => {
127-
return (
128-
<div
129-
key={`suggestion-key-${idx}`}
130-
style={{
131-
borderColor: theme.color,
132-
color: theme.color,
133-
}}
134-
onClick={() => {
135-
ctx?.onSendText(x);
136-
}}
137-
className="pks_bg-white pks_flex pks_items-center pks_justify-center pks_px-4 pks_py-2 pks_rounded-full pks_w-fit pks_border-[0.5px] pks_text-ms pks_text-sm hover:pks_bg-white/30 pks_font-medium pks_cursor-pointer"
138-
>
139-
<span className="pks_mr-1">{x}</span>
140-
<ArrowRight className="pks_w-4 pks_h-4" strokeWidth={1} />
141-
</div>
142-
);
143-
})}
144-
</li>
162+
145163
{messages.map((chat, idx) => (
146164
<MessageContent
147165
key={`msg-idx-${idx}`}
@@ -168,7 +186,19 @@ export const MessageContent: FC<{
168186
};
169187
return message.role === MessageRole.User ? (
170188
<li className="message-cntnt pks_flex pks_items-end pks_justify-end pks_space-x-2 pks_mb-4 pks_px-4">
171-
<div className="pks_flex pks_w-full pks_items-end pks_flex-col pks_space-y-1 pks_text-[14px]">
189+
<div className="pks_flex pks_w-full pks_items-end pks_flex-col pks_space-y-1 pks_text-[14px] pks_relative">
190+
<div
191+
style={{
192+
right: "-10px",
193+
}}
194+
className="pks_bottom-[0px] pks_rounded-[20px] pks_absolute pks_bg-gray-300 pks_w-6 pks_h-6"
195+
/>
196+
<div
197+
style={{
198+
right: "-16px",
199+
}}
200+
className="pks_bottom-[8px] pks_rounded-[40px] pks_absolute pks_bg-gray-100 pks_w-6 pks_h-6"
201+
/>
172202
{message.messages.map((x, idx) => {
173203
return (
174204
<AnimatePresence key={`idx-msg-${idx}`}>
@@ -178,7 +208,7 @@ export const MessageContent: FC<{
178208
initial="initial"
179209
animate="animate"
180210
exit="exit"
181-
className="pks_bg-gray-200 pks_px-3 pks_py-2 pks_rounded-2xl pks_w-fit"
211+
className="pks_bg-gray-300 pks_px-3 pks_py-2 pks_rounded-2xl pks_w-fit pks_relative"
182212
>
183213
<motion.div
184214
variants={{
@@ -216,7 +246,7 @@ export const MessageContent: FC<{
216246
"[&_:is(strong,h1,h2,h3,h4,h5,h6)]:pks_font-semibold",
217247
"[&_:is(h1)]:pks_text-2xl",
218248
"[&_:is(h2)]:pks_text-lg",
219-
"[&_:is(li)]:pks_py-2",
249+
"[&_:is(li)]:pks_py-0",
220250
"[&_:is(h3)]:pks_text-md",
221251
"[&_h1:not(:first-child)]:pks_mt-8",
222252
"[&_h1:not(:last-child)]:pks_mb-6",
@@ -272,7 +302,20 @@ export const MessageContent: FC<{
272302
</span>
273303
</div>
274304

275-
<div className="pks_space-y-1 pks_text-[14px]">
305+
<div className="pks_space-y-1 pks_text-[14px] pks_relative">
306+
<div
307+
style={{
308+
left: "-10px",
309+
background: theme.color,
310+
}}
311+
className="pks_bottom-[0px] pks_rounded-[20px] pks_absolute pks_w-6 pks_h-6"
312+
/>
313+
<div
314+
style={{
315+
left: "-16px",
316+
}}
317+
className="pks_bottom-[8px] -pks_left-[16px] pks_rounded-[40px] pks_absolute pks_bg-gray-100 pks_w-6 pks_h-6"
318+
/>
276319
{message.messages.map((x, idx) => {
277320
return (
278321
<AnimatePresence key={`idx-msg-${idx}`}>
@@ -285,7 +328,7 @@ export const MessageContent: FC<{
285328
style={{
286329
background: theme.color,
287330
}}
288-
className="pks_text-white pks_px-3 pks_py-2 pks_rounded-2xl pks_w-fit"
331+
className="pks_text-white pks_px-3 pks_py-2 pks_rounded-2xl pks_w-fit pks_relative"
289332
>
290333
<motion.div
291334
variants={{
@@ -323,7 +366,7 @@ export const MessageContent: FC<{
323366
"[&_:is(strong,h1,h2,h3,h4,h5,h6)]:pks_font-semibold",
324367
"[&_:is(h1)]:pks_text-2xl",
325368
"[&_:is(h2)]:pks_text-lg",
326-
"[&_:is(li)]:pks_py-2",
369+
"[&_:is(li)]:pks_py-0",
327370
"[&_:is(h3)]:pks_text-md",
328371
"[&_h1:not(:first-child)]:pks_mt-8",
329372
"[&_h1:not(:last-child)]:pks_mb-6",

0 commit comments

Comments
 (0)