Skip to content

Commit 242c667

Browse files
aileenvlaileenvl
committed
pr comments and facets added
1 parent f4e51bf commit 242c667

18 files changed

Lines changed: 1026 additions & 1652 deletions

File tree

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

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
.chatActionsContainer {
2+
@apply flex;
3+
@apply items-center;
4+
@apply justify-end;
5+
@apply pt-2;
6+
}
7+
8+
.chatActionsList {
9+
@apply flex;
10+
@apply list-none;
11+
@apply items-center;
12+
@apply gap-2;
13+
@apply p-0;
14+
}
15+
16+
.chatAction {
17+
@apply cursor-pointer;
18+
@apply rounded-full;
19+
@apply p-2;
20+
@apply text-neutral-800;
21+
@apply transition-colors;
22+
@apply duration-300;
23+
@apply hover:bg-neutral-300;
24+
@apply dark:text-neutral-400;
25+
@apply dark:hover:bg-neutral-900;
26+
27+
svg {
28+
@apply h-4;
29+
@apply w-4;
30+
}
31+
}
32+
33+
.chatActionIconSelected {
34+
@apply text-green-600;
35+
@apply dark:text-green-400;
36+
}

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

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
'use client';
2+
3+
import {
4+
DocumentCheckIcon,
5+
ClipboardIcon,
6+
ArrowPathIcon,
7+
} from '@heroicons/react/24/solid';
8+
import type { Interaction } from '@orama/core';
9+
import { ChatInteractions } from '@orama/ui/components';
10+
import type { FC } from 'react';
11+
12+
import styles from './index.module.css';
13+
14+
type ChatActionsProps = {
15+
interaction: Interaction;
16+
index: number;
17+
totalInteractions: number;
18+
};
19+
20+
export const ChatActions: FC<ChatActionsProps> = ({
21+
interaction,
22+
index,
23+
totalInteractions,
24+
}) => {
25+
if (!interaction.response) return null;
26+
27+
return (
28+
<div className={styles.chatActionsContainer}>
29+
<ul className={styles.chatActionsList}>
30+
{index === totalInteractions - 1 && (
31+
<li>
32+
<ChatInteractions.RegenerateLatest
33+
className={styles.chatAction}
34+
interaction={interaction}
35+
>
36+
<ArrowPathIcon />
37+
</ChatInteractions.RegenerateLatest>
38+
</li>
39+
)}
40+
<li>
41+
<ChatInteractions.CopyMessage
42+
className={styles.chatAction}
43+
interaction={interaction}
44+
>
45+
{(copied: boolean) =>
46+
copied ? (
47+
<DocumentCheckIcon className={styles.chatActionIconSelected} />
48+
) : (
49+
<ClipboardIcon />
50+
)
51+
}
52+
</ChatInteractions.CopyMessage>
53+
</li>
54+
</ul>
55+
</div>
56+
);
57+
};

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

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
.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;
9+
10+
background-color: #1a1a1a !important;
11+
border: 1px solid #2c3437 !important;
12+
color: #fff !important;
13+
margin: 0 var(--spacing-l, calc(16rem / var(--orama-base-font-size, 16))) !important;
14+
}
15+
16+
.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;
27+
}
28+
29+
.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;
41+
}
42+
43+
/* High specificity overrides for Orama textarea components */
44+
:global(.oramaPromptTextarea) {
45+
background-color: #1a1a1a !important;
46+
border: 1px solid #2c3437 !important;
47+
border-radius: 16px !important;
48+
color: #fff !important;
49+
font-family: inherit !important;
50+
font-size: 16px !important;
51+
font-weight: 400 !important;
52+
line-height: 1.5 !important;
53+
margin: 0 var(--spacing-l, calc(16rem / var(--orama-base-font-size, 16))) !important;
54+
outline: none !important;
55+
padding: 12px 16px !important;
56+
resize: none !important;
57+
width: 100% !important;
58+
}
59+
60+
:global(.oramaPromptTextarea::placeholder) {
61+
color: #9ca3af !important;
62+
}
63+
64+
:global(.oramaPromptTextarea:focus) {
65+
border-color: #374151 !important;
66+
outline: none !important;
67+
}
68+
69+
/* Responsive font sizes */
70+
@media (max-width: 768px) {
71+
:global(.oramaPromptTextarea) {
72+
font-size: 16px !important;
73+
}
74+
}
75+
76+
.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;
83+
84+
margin-top: 16px;
85+
}

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

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
'use client';
2+
3+
import { PaperAirplaneIcon } from '@heroicons/react/20/solid';
4+
import { PauseCircleIcon } from '@heroicons/react/24/solid';
5+
import { PromptTextArea } from '@orama/ui/components';
6+
import { useTranslations } from 'next-intl';
7+
import type { FC } from 'react';
8+
9+
import styles from './index.module.css';
10+
11+
export const ChatInput: FC = () => {
12+
const t = useTranslations();
13+
14+
return (
15+
<div className="pb-2 pt-6">
16+
<PromptTextArea.Wrapper
17+
className={styles.promptWrapperCustom}
18+
style={{
19+
position: 'relative',
20+
margin: '0 32px',
21+
display: 'flex',
22+
alignItems: 'center',
23+
gap: '8px',
24+
borderRadius: '16px',
25+
border: '1px solid rgb(64 64 64)',
26+
backgroundColor: 'rgb(38 38 38)',
27+
padding: '12px 16px',
28+
fontSize: '16px',
29+
color: 'white',
30+
}}
31+
>
32+
<PromptTextArea.Field
33+
placeholder={t('components.search.chatPlaceholder')}
34+
rows={1}
35+
maxLength={500}
36+
autoFocus
37+
className={styles.promptFieldCustom}
38+
style={{
39+
width: '100%',
40+
resize: 'none',
41+
border: 'none',
42+
background: 'transparent',
43+
padding: '0',
44+
color: 'white',
45+
fontFamily: 'inherit',
46+
fontSize: '16px',
47+
fontWeight: '400',
48+
lineHeight: '1.5',
49+
margin: '0',
50+
outline: 'none',
51+
}}
52+
/>
53+
<PromptTextArea.Button
54+
abortContent={<PauseCircleIcon />}
55+
className={styles.promptButtonCustom}
56+
style={{
57+
position: 'absolute',
58+
right: '12px',
59+
top: '50%',
60+
transform: 'translateY(-50%)',
61+
cursor: 'pointer',
62+
borderRadius: '8px',
63+
backgroundColor: 'rgb(34 197 94)',
64+
padding: '8px',
65+
color: 'white',
66+
transition: 'background-color 0.3s',
67+
border: 'none',
68+
}}
69+
>
70+
<PaperAirplaneIcon />
71+
</PromptTextArea.Button>
72+
</PromptTextArea.Wrapper>
73+
<div
74+
className={styles.slidingPanelFooter}
75+
style={{
76+
alignItems: 'center',
77+
color: '#a3a3a3',
78+
display: 'flex',
79+
flexDirection: 'row',
80+
fontSize: '12px',
81+
justifyContent: 'center',
82+
paddingTop: '4px',
83+
}}
84+
>
85+
<small>{t('components.search.disclaimer')}</small>
86+
</div>
87+
</div>
88+
);
89+
};

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

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
.chatUserPrompt {
2+
@apply mb-4;
3+
@apply text-base;
4+
@apply text-neutral-900;
5+
@apply dark:text-neutral-200;
6+
}
7+
8+
.chatLoader {
9+
@apply my-4;
10+
}
11+
12+
.chatAssistantMessageMain {
13+
@apply mb-4;
14+
@apply text-base;
15+
@apply text-neutral-900;
16+
@apply dark:text-neutral-200;
17+
}
18+
19+
.chatAssistantMessageWrapper {
20+
/* Styles applied via inline styles for specificity */
21+
}
22+
23+
.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;
31+
32+
background: transparent;
33+
border: none;
34+
color: #fff !important;
35+
margin: 0;
36+
padding: 0;
37+
}
38+
39+
.chatAssistantMessage p {
40+
@apply font-sm-line-height;
41+
@apply mb-3;
42+
@apply text-white;
43+
}
44+
45+
.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;
52+
53+
code {
54+
@apply rounded-lg;
55+
@apply p-3;
56+
@apply text-sm;
57+
}
58+
}
59+
60+
.chatAssistantMessage code {
61+
@apply rounded;
62+
@apply bg-black/30;
63+
@apply p-1;
64+
@apply text-white;
65+
}
66+
67+
.chatAssistantMessage ul {
68+
@apply list-disc;
69+
@apply pl-6;
70+
}
71+
72+
.chatAssistantMessage ol {
73+
@apply list-decimal;
74+
@apply pl-6;
75+
}
76+
77+
.chatAssistantMessage li {
78+
@apply mb-1;
79+
}
80+
81+
.chatAssistantMessage h1,
82+
.chatAssistantMessage h2,
83+
.chatAssistantMessage h3 {
84+
@apply mb-2;
85+
@apply text-lg;
86+
@apply font-bold;
87+
}

0 commit comments

Comments
 (0)