Skip to content

Commit e6dd0f7

Browse files
michelerivag-francescaaileenvlavivkeller
authored
feat(search): use new Orama components (#8175)
* feat: add new searchbox - initial setup * style: search button * style: searchbox empty state * style: modal search * style: prompt wrapper * fix: layout sliding panel * style: chat sources * refactor: search component * feat: add translations for search component * update orama core and update logo * update sync * update pnpm-lock * Update apps/site/components/Common/Searchbox/Chat.tsx Co-authored-by: Aviv Keller <me@aviv.sh> Signed-off-by: Aileen Villanueva Lecuona <aileenvl@gmail.com> * Update apps/site/components/Common/Searchbox/Chat.tsx Co-authored-by: Aviv Keller <me@aviv.sh> Signed-off-by: Aileen Villanueva Lecuona <aileenvl@gmail.com> * Update apps/site/components/Common/Searchbox/Search.tsx Co-authored-by: Aviv Keller <me@aviv.sh> Signed-off-by: Aileen Villanueva Lecuona <aileenvl@gmail.com> * Update apps/site/components/Common/Searchbox/Search.tsx Co-authored-by: Aviv Keller <me@aviv.sh> Signed-off-by: Aileen Villanueva Lecuona <aileenvl@gmail.com> * Update apps/site/components/Common/Searchbox/Search.tsx Co-authored-by: Aviv Keller <me@aviv.sh> Signed-off-by: Aileen Villanueva Lecuona <aileenvl@gmail.com> * fix height and pr comments * fix import and add directories for Search and Chat * update icon and orama ui components * rollback translation changes * update on datasource and ui components * update env variables * pr comments and facets added * pr comments * fixes in styles and facets * facets search fix * push facets query fix * feat: adds filters to search * fix facet count * reset searchTerm * old logo * fix mobile search * chat mobile * mobile enhacements * fix blur * env variables and dispatcher * change css to tailwind, remove inline styles and add env constant * update orama core and add data source * fixes css * Revert "fixes css" This reverts commit 43d8cac. * Add .env to gitignore to prevent accidental commits * chore: update @orama/ui version * style: review modal style * style: review search results style * fix: arrow navigation and focus style * feat: open modal via CMD+k * fix: SlidingPanel classes * fix: chat scroll behaviour * refactor: chat interface * fix: sources style not applied * fix: style of chat panel in light mode * style: fix sources and scroll to bottom style * fix: collapse source text link * style: add chat loading animation * style: mobile toggle search/chat * fix: toggle animation * refactor: search modal layout composition * refactor: search footer and chat actions * fix: chat scrollbar style * style: mobile fixes for chat panel * fix: markdown style * chore: update env var name * fix: chat scrollbar style * chore: update @orama/ui version * style: fix mobile scrollbar style * chore: update @orama/ui to 1.2.0 * feat: improve search loading * fix: remove default public orama key * fix: use tailwind utility classes * style: review searchbar scrollbar style * fix: minor syntax improvements * fix: use translated label * fix: document type * fix: use translated labels for suggestions * fix: gitignore comment * style: add motion-safe variant * style: use size class * fix: separate type imports * style: use vertcal tw classes * style: minor style fixes * fix: color contrast * fix: modal search focus trap * style: fix color contrast * fix: disable search button when no env vars * fix: ssr searchbox * fix: clean up code * fix: import get documents * fix: playwright tests for search * fix: get documents * fix: search results element targeted for test * fix: update workflow with the new vars * fix: remove querySelectorAll * fix: cleanup sliding panel props * refactor: move orama instance to provider * refactor: manage orama searchbox state via reducer * fix: orama git workflow step * refactor: clean up Search component and add searchbox provider * fix: remove orama tests * chore: update @orama/core * refactor: minor fixes and clean up * refactor: clean up modal state * refactor: remove oramaProvider * fix: remove throw error * refactor: rename search state and reducer * fix: check pageSectionTitle for source --------- Signed-off-by: Aileen Villanueva Lecuona <aileenvl@gmail.com> Co-authored-by: Francesca Giannino <francesca.giannino86@gmail.com> Co-authored-by: Aileen Villanueva <aileenvl@gmail.com> Co-authored-by: Aviv Keller <me@aviv.sh>
1 parent 47a6c9f commit e6dd0f7

File tree

49 files changed

+2407
-386
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

49 files changed

+2407
-386
lines changed

‎.github/workflows/sync-orama.yml‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,5 +43,6 @@ jobs:
4343
run: node --run sync-orama
4444
env:
4545
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
46-
ORAMA_INDEX_ID: ${{ github.event_name == 'push' && secrets.ORAMA_PRODUCTION_INDEX_ID || secrets.ORAMA_INDEX_ID }}
47-
ORAMA_SECRET_KEY: ${{ github.event_name == 'push' && secrets.ORAMA_PRODUCTION_SECRET_KEY || secrets.ORAMA_SECRET_KEY }}
46+
NEW_ORAMA_PROJECT_ID: ${{ github.event_name == 'push' && secrets.NEW_ORAMA_PRODUCTION_PROJECT_ID || secrets.NEW_ORAMA_PROJECT_ID }}
47+
NEW_ORAMA_PRIVATE_API_KEY: ${{ github.event_name == 'push' && secrets.NEW_ORAMA_PRODUCTION_PRIVATE_API_KEY || secrets.NEW_ORAMA_PRIVATE_API_KEY }}
48+
NEW_ORAMA_DATASOURCE_ID: ${{ github.event_name == 'push' && secrets.NEW_ORAMA_PRODUCTION_DATASOURCE_ID || secrets.NEW_ORAMA_DATASOURCE_ID }}

‎.gitignore‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,4 +48,7 @@ test-results
4848
playwright-report
4949

5050
## MacOS Ignored Files
51-
.DS_Store
51+
.DS_Store
52+
53+
## Other Files
54+
.env

‎apps/site/components/Common/Search/index.tsx‎

Lines changed: 0 additions & 145 deletions
This file was deleted.

‎apps/site/components/Common/Search/utils.ts‎

Lines changed: 0 additions & 60 deletions
This file was deleted.

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

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
@reference "../../../../styles/index.css";
2+
3+
.chatActionsContainer {
4+
@apply flex
5+
items-center
6+
justify-end;
7+
}
8+
9+
.chatActionsList {
10+
@apply flex
11+
list-none
12+
items-center
13+
gap-2
14+
p-0;
15+
}
16+
17+
.chatAction {
18+
@apply cursor-pointer
19+
rounded-full
20+
p-2
21+
text-neutral-800
22+
duration-300
23+
hover:bg-neutral-300
24+
focus:bg-neutral-300
25+
focus:outline-none
26+
motion-safe:transition-colors
27+
dark:text-neutral-400
28+
dark:hover:bg-neutral-900
29+
dark:focus:bg-neutral-900;
30+
31+
svg {
32+
@apply size-4;
33+
}
34+
}
35+
36+
.chatActionIconSelected {
37+
@apply text-green-600
38+
dark:text-green-400;
39+
}
40+
41+
.chatActionDisaliked {
42+
@apply text-neutral-900
43+
dark:text-neutral-800;
44+
}

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

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

0 commit comments

Comments
 (0)