Skip to content

Commit 535d6a8

Browse files
aileenvlaileenvl
committed
pr comments
1 parent 242c667 commit 535d6a8

5 files changed

Lines changed: 137 additions & 121 deletions

File tree

‎apps/site/components/Common/Searchbox/Chat/ChatInput/index.module.css‎

Lines changed: 52 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,86 @@
11
.promptWrapperCustom {
2-
@apply relative;
3-
@apply flex;
4-
@apply items-center;
5-
@apply rounded-2xl;
6-
@apply bg-white;
7-
@apply text-base;
8-
@apply shadow-sm;
2+
@apply relative,
3+
flex,
4+
items-center,
5+
rounded-2xl,
6+
bg-white,
7+
text-base,
8+
shadow-sm,
9+
!bg-neutral-900,
10+
!border,
11+
!border-neutral-700,
12+
!text-white;
913

10-
background-color: #1a1a1a !important;
11-
border: 1px solid #2c3437 !important;
12-
color: #fff !important;
1314
margin: 0 var(--spacing-l, calc(16rem / var(--orama-base-font-size, 16))) !important;
1415
}
1516

1617
.promptFieldCustom {
17-
@apply w-full;
18-
@apply resize-none;
19-
@apply border-0;
20-
@apply px-0;
21-
@apply py-0;
22-
@apply text-white;
23-
@apply placeholder:text-neutral-400;
24-
@apply focus:outline-none;
25-
26-
background: transparent !important;
18+
@apply w-full,
19+
resize-none,
20+
border-0,
21+
px-0,
22+
py-0,
23+
text-white,
24+
placeholder:text-neutral-400,
25+
focus:outline-none,
26+
!bg-transparent;
2727
}
2828

2929
.promptButtonCustom {
30-
@apply cursor-pointer;
31-
@apply rounded-lg;
32-
@apply p-4;
33-
@apply text-white;
34-
@apply transition-colors;
35-
@apply duration-300;
36-
@apply disabled:cursor-not-allowed;
37-
@apply disabled:bg-neutral-600;
38-
@apply disabled:text-neutral-400;
39-
40-
background: #22c55e !important;
30+
@apply cursor-pointer,
31+
rounded-lg,
32+
p-4,
33+
text-white,
34+
transition-colors,
35+
duration-300,
36+
disabled:cursor-not-allowed,
37+
disabled:bg-neutral-600,
38+
disabled:text-neutral-400,
39+
!bg-green-500;
4140
}
4241

4342
/* High specificity overrides for Orama textarea components */
4443
:global(.oramaPromptTextarea) {
45-
background-color: #1a1a1a !important;
46-
border: 1px solid #2c3437 !important;
47-
border-radius: 16px !important;
48-
color: #fff !important;
44+
@apply !bg-neutral-900,
45+
!border,
46+
!border-neutral-700,
47+
!rounded-2xl,
48+
!text-white,
49+
!font-normal,
50+
!text-base,
51+
!leading-normal,
52+
!outline-none,
53+
!resize-none,
54+
!w-full;
55+
4956
font-family: inherit !important;
50-
font-size: 16px !important;
51-
font-weight: 400 !important;
52-
line-height: 1.5 !important;
5357
margin: 0 var(--spacing-l, calc(16rem / var(--orama-base-font-size, 16))) !important;
54-
outline: none !important;
5558
padding: 12px 16px !important;
56-
resize: none !important;
57-
width: 100% !important;
5859
}
5960

6061
:global(.oramaPromptTextarea::placeholder) {
61-
color: #9ca3af !important;
62+
@apply !text-gray-400;
6263
}
6364

6465
:global(.oramaPromptTextarea:focus) {
65-
border-color: #374151 !important;
66-
outline: none !important;
66+
@apply !border-gray-600,
67+
!outline-none;
6768
}
6869

6970
/* Responsive font sizes */
7071
@media (max-width: 768px) {
7172
:global(.oramaPromptTextarea) {
72-
font-size: 16px !important;
73+
@apply !text-base;
7374
}
7475
}
7576

7677
.slidingPanelFooter {
77-
@apply flex;
78-
@apply items-center;
79-
@apply justify-center;
80-
@apply pt-1;
81-
@apply text-xs;
82-
@apply text-neutral-400;
78+
@apply flex,
79+
items-center,
80+
justify-center,
81+
pt-1,
82+
text-xs,
83+
text-neutral-400;
8384

8485
margin-top: 16px;
8586
}

‎apps/site/components/Common/Searchbox/Chat/ChatMessage/index.module.css‎

Lines changed: 41 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,77 +1,79 @@
11
.chatUserPrompt {
2-
@apply mb-4;
3-
@apply text-base;
4-
@apply text-neutral-900;
5-
@apply dark:text-neutral-200;
2+
@apply mb-4,
3+
text-base,
4+
text-neutral-900,
5+
dark:text-neutral-200;
66
}
77

88
.chatLoader {
99
@apply my-4;
1010
}
1111

1212
.chatAssistantMessageMain {
13-
@apply mb-4;
14-
@apply text-base;
15-
@apply text-neutral-900;
16-
@apply dark:text-neutral-200;
13+
@apply mb-4,
14+
text-base,
15+
text-neutral-900,
16+
dark:text-neutral-200;
1717
}
1818

1919
.chatAssistantMessageWrapper {
2020
/* Styles applied via inline styles for specificity */
2121
}
2222

2323
.chatAssistantMessage {
24-
@apply my-4;
25-
@apply mb-6;
26-
@apply max-w-full;
27-
@apply rounded-xl;
28-
@apply px-6;
29-
@apply py-4;
30-
@apply text-base;
24+
@apply my-4,
25+
mb-6,
26+
max-w-full,
27+
rounded-xl,
28+
px-6,
29+
py-4,
30+
text-base;
3131

3232
background: transparent;
3333
border: none;
34-
color: #fff !important;
34+
35+
@apply !text-white;
36+
3537
margin: 0;
3638
padding: 0;
3739
}
3840

3941
.chatAssistantMessage p {
40-
@apply font-sm-line-height;
41-
@apply mb-3;
42-
@apply text-white;
42+
@apply font-sm-line-height,
43+
mb-3,
44+
text-white;
4345
}
4446

4547
.chatAssistantMessage pre {
46-
@apply my-4;
47-
@apply rounded-md;
48-
@apply bg-black/20;
49-
@apply p-4;
50-
@apply text-xs;
51-
@apply text-white;
48+
@apply my-4,
49+
rounded-md,
50+
bg-black/20,
51+
p-4,
52+
text-xs,
53+
text-white;
5254

5355
code {
54-
@apply rounded-lg;
55-
@apply p-3;
56-
@apply text-sm;
56+
@apply rounded-lg,
57+
p-3,
58+
text-sm;
5759
}
5860
}
5961

6062
.chatAssistantMessage code {
61-
@apply rounded;
62-
@apply bg-black/30;
63-
@apply p-1;
64-
@apply text-white;
63+
@apply rounded,
64+
bg-black/30,
65+
p-1,
66+
text-white;
6567
}
6668

6769
.chatAssistantMessage ul {
68-
@apply list-disc;
69-
@apply pl-6;
70+
@apply list-disc,
71+
pl-6;
7072
}
7173

7274
.chatAssistantMessage ol {
73-
@apply list-decimal;
74-
@apply pl-6;
75+
@apply list-decimal,
76+
pl-6;
7577
}
7678

7779
.chatAssistantMessage li {
@@ -81,7 +83,7 @@
8183
.chatAssistantMessage h1,
8284
.chatAssistantMessage h2,
8385
.chatAssistantMessage h3 {
84-
@apply mb-2;
85-
@apply text-lg;
86-
@apply font-bold;
86+
@apply mb-2,
87+
text-lg,
88+
font-bold;
8789
}

‎apps/site/components/Common/Searchbox/Chat/index.module.css‎

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,26 @@
2222
}
2323
}
2424

25+
.slidingPanelContentWrapper {
26+
@apply fixed,
27+
bottom-0,
28+
left-0,
29+
z-[10019],
30+
box-border,
31+
h-[95vh],
32+
w-full,
33+
overflow-hidden,
34+
p-0,
35+
!bg-neutral-950,
36+
!border,
37+
!border-neutral-700,
38+
!text-white;
39+
40+
border-radius: var(--radius-m, calc(12rem / var(--orama-base-font-size, 16)))
41+
var(--radius-m, calc(12rem / var(--orama-base-font-size, 16))) 0 0;
42+
transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
43+
}
44+
2545
.slidingPanelContent {
2646
@apply h-[90vh];
2747
@apply max-w-[100vw];
@@ -281,8 +301,8 @@
281301
/* Textarea styles moved to ChatInput component */
282302

283303
:global(.hljs) {
284-
background: #282c34 !important;
285-
color: #abb2bf !important;
304+
@apply !bg-gray-800,
305+
!text-gray-300;
286306
}
287307

288308
.scrollDownButton {

‎apps/site/components/Common/Searchbox/Chat/index.tsx‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
import { ArrowDownIcon, XMarkIcon } from '@heroicons/react/24/solid';
44
import type { Interaction } from '@orama/core';
55
import { ChatInteractions, SlidingPanel } from '@orama/ui/components';
6+
import '@orama/ui/styles.css';
67
import { useScrollableContainer } from '@orama/ui/hooks/useScrollableContainer';
78
import { useTranslations } from 'next-intl';
89
import type { FC, PropsWithChildren } from 'react';
@@ -39,15 +40,7 @@ export const SlidingChatPanel: FC<SlidingChatPanelProps> = ({
3940
<SlidingPanel.Backdrop className="fixed inset-0 z-[10018] bg-black/60" />
4041
<SlidingPanel.Content
4142
position="bottom"
42-
className="fixed bottom-0 left-0 z-[10019] box-border h-[95vh] w-full overflow-hidden p-0"
43-
style={{
44-
backgroundColor: '#050505',
45-
border: '1px solid #2c3437',
46-
borderRadius:
47-
'var(--radius-m, calc(12rem / var(--orama-base-font-size, 16))) var(--radius-m, calc(12rem / var(--orama-base-font-size, 16))) 0 0',
48-
color: '#ffffff',
49-
transition: '0.4s cubic-bezier(0.4, 0, 0.2, 1)',
50-
}}
43+
className={styles.slidingPanelContentWrapper}
5144
>
5245
<SlidingPanel.Close
5346
className={styles.slidingPanelCloseButton}

‎apps/site/components/Common/Searchbox/DocumentLink/index.module.css‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,25 @@
11
.documentLink {
2-
@apply rounded-xl;
3-
@apply bg-neutral-100;
4-
@apply px-4;
5-
@apply py-2;
6-
@apply text-neutral-900;
7-
@apply transition-colors;
8-
@apply duration-300;
9-
@apply hover:bg-neutral-200;
10-
@apply focus:bg-neutral-200;
11-
@apply dark:bg-neutral-950;
12-
@apply dark:text-neutral-200;
13-
@apply hover:dark:bg-neutral-900;
14-
@apply focus:dark:bg-neutral-900;
2+
@apply rounded-xl,
3+
bg-neutral-100,
4+
px-4,
5+
py-2,
6+
text-neutral-900,
7+
transition-colors,
8+
duration-300,
9+
hover:bg-neutral-200,
10+
focus:bg-neutral-200,
11+
dark:bg-neutral-950,
12+
dark:text-neutral-200,
13+
hover:dark:bg-neutral-900,
14+
focus:dark:bg-neutral-900;
1515
}
1616

1717
.documentTitle {
18-
@apply max-w-full;
19-
@apply overflow-hidden;
20-
@apply truncate;
21-
@apply text-ellipsis;
22-
@apply whitespace-nowrap;
23-
@apply text-sm;
24-
@apply font-semibold;
18+
@apply max-w-full,
19+
overflow-hidden,
20+
truncate,
21+
text-ellipsis,
22+
whitespace-nowrap,
23+
text-sm,
24+
font-semibold;
2525
}

0 commit comments

Comments
 (0)