Skip to content

Commit 46f2124

Browse files
g-francescag-francesca
committed
refactor: minor fixes and clean up
1 parent ab6a1a1 commit 46f2124

10 files changed

Lines changed: 136 additions & 140 deletions

File tree

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,13 @@ export const ChatInput: FC = () => {
2626
const hasInteractions = !!interactions?.length;
2727

2828
useEffect(() => {
29-
setTimeout(() => {
29+
const timeoutId = setTimeout(() => {
3030
textareaRef.current?.focus();
3131
}, 100);
32+
33+
return () => {
34+
clearTimeout(timeoutId);
35+
};
3236
}, []);
3337

3438
return (

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
.mobileChatContainer {
2+
@apply flex
3+
grow
4+
flex-col
5+
overflow-hidden
6+
px-4
7+
pb-4;
8+
}
9+
10+
.mobileChatTop {
11+
@apply grow
12+
overflow-hidden;
13+
}
14+
15+
.mobileChatBottom {
16+
@apply mt-4;
17+
}

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

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
'use client';
2+
import type { FC, PropsWithChildren } from 'react';
3+
import { useEffect, useState, useRef } from 'react';
4+
5+
import { useSearchbox } from '#site/providers/searchboxProvider';
6+
7+
import { ChatInput } from '../ChatInput';
8+
import { ChatInteractionsContainer } from '../ChatInteractions';
9+
import { Footer } from '../Footer';
10+
import styles from '../index.module.css';
11+
import { MobileTopBar } from '../MobileTopBar';
12+
import { Search } from '../Search';
13+
import { SlidingChatPanel } from '../SlidingChatPanel';
14+
15+
export const InnerSearchboxModal: FC<
16+
PropsWithChildren<{ onClose: () => void }>
17+
> = ({ onClose }) => {
18+
const searchbox = useSearchbox();
19+
const [isMobileScreen, setIsMobileScreen] = useState(false);
20+
const searchInputRef = useRef<HTMLInputElement>(null);
21+
22+
const displaySearch =
23+
!isMobileScreen || (isMobileScreen && searchbox.mode === 'search');
24+
25+
useEffect(() => {
26+
const checkScreenSize = () => {
27+
setIsMobileScreen(window.innerWidth < 1024);
28+
};
29+
checkScreenSize();
30+
window.addEventListener('resize', checkScreenSize);
31+
return () => {
32+
window.removeEventListener('resize', checkScreenSize);
33+
};
34+
}, []);
35+
36+
return (
37+
<>
38+
{isMobileScreen && (
39+
<MobileTopBar
40+
isChatOpen={searchbox.mode === 'chat'}
41+
onClose={onClose}
42+
onSelect={searchbox.switchTo}
43+
/>
44+
)}
45+
{displaySearch && <Search ref={searchInputRef} />}
46+
{isMobileScreen && searchbox.mode === 'chat' && (
47+
<>
48+
<div className={styles.mobileChatContainer}>
49+
<div className={styles.mobileChatTop}>
50+
<ChatInteractionsContainer />
51+
</div>
52+
<div className={styles.mobileChatBottom}>
53+
<ChatInput />
54+
</div>
55+
</div>
56+
<Footer />
57+
</>
58+
)}
59+
{!isMobileScreen && searchbox.mode === 'chat' && (
60+
<SlidingChatPanel
61+
open={searchbox.isChatOpen}
62+
onClose={() => {
63+
searchbox.closeChatAndReset(() => {
64+
searchInputRef.current?.focus();
65+
});
66+
}}
67+
/>
68+
)}
69+
</>
70+
);
71+
};

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,6 @@ export const Search: FC<SearchProps> = ({ ref }) => {
2424
<SearchInput.Wrapper className={styles.searchInputWrapper}>
2525
<MagnifyingGlassIcon />
2626
<SearchInput.Input
27-
data-testid="orama-input"
2827
inputId="orama-doc-search"
2928
ariaLabel={t('components.search.searchPlaceholder')}
3029
placeholder={t('components.search.searchPlaceholder')}

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,6 @@ export const SearchResultsWrapper: FC = () => {
109109
<SearchResults.GroupsWrapper
110110
className={styles.searchResultsGroupWrapper}
111111
groupBy="siteSection"
112-
data-testid="orama-search-results"
113112
>
114113
{group => (
115114
<div key={group.name} className={styles.searchResultsGroup}>

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

Lines changed: 0 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -103,21 +103,3 @@
103103
lg:border
104104
dark:border-neutral-900;
105105
}
106-
107-
.mobileChatContainer {
108-
@apply flex
109-
grow
110-
flex-col
111-
overflow-hidden
112-
px-4
113-
pb-4;
114-
}
115-
116-
.mobileChatTop {
117-
@apply grow
118-
overflow-hidden;
119-
}
120-
121-
.mobileChatBottom {
122-
@apply mt-4;
123-
}

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

Lines changed: 33 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import { MagnifyingGlassIcon } from '@heroicons/react/24/solid';
44
import { SearchRoot, ChatRoot, Modal } from '@orama/ui/components';
55
import { useTranslations } from 'next-intl';
66
import type { FC, PropsWithChildren } from 'react';
7-
import { useEffect, useState, useRef } from 'react';
87

98
import '@orama/ui/styles.css';
109

@@ -14,122 +13,46 @@ import {
1413
useSearchbox,
1514
} from '#site/providers/searchboxProvider';
1615

17-
import { ChatInput } from './ChatInput';
18-
import { ChatInteractionsContainer } from './ChatInteractions';
19-
import { Footer } from './Footer';
2016
import styles from './index.module.css';
21-
import { MobileTopBar } from './MobileTopBar';
22-
import { Search } from './Search';
23-
import { SlidingChatPanel } from './SlidingChatPanel';
24-
25-
const InnerSearchboxModal: FC<PropsWithChildren<{ onClose: () => void }>> = ({
26-
onClose,
27-
}) => {
28-
const searchbox = useSearchbox();
29-
const [isMobileScreen, setIsMobileScreen] = useState(false);
30-
const searchInputRef = useRef<HTMLInputElement>(null);
31-
32-
const displaySearch =
33-
!isMobileScreen || (isMobileScreen && searchbox.mode === 'search');
34-
35-
useEffect(() => {
36-
const checkScreenSize = () => {
37-
setIsMobileScreen(window.innerWidth < 1024);
38-
};
39-
checkScreenSize();
40-
window.addEventListener('resize', checkScreenSize);
41-
return () => {
42-
window.removeEventListener('resize', checkScreenSize);
43-
};
44-
}, []);
45-
46-
return (
47-
<>
48-
{isMobileScreen && (
49-
<MobileTopBar
50-
isChatOpen={searchbox.mode === 'chat'}
51-
onClose={onClose}
52-
onSelect={searchbox.switchTo}
53-
/>
54-
)}
55-
{displaySearch && <Search ref={searchInputRef} />}
56-
{isMobileScreen && searchbox.mode === 'chat' && (
57-
<>
58-
<div className={styles.mobileChatContainer}>
59-
<div className={styles.mobileChatTop}>
60-
<ChatInteractionsContainer />
61-
</div>
62-
<div className={styles.mobileChatBottom}>
63-
<ChatInput />
64-
</div>
65-
</div>
66-
<Footer />
67-
</>
68-
)}
69-
{!isMobileScreen && searchbox.mode === 'chat' && (
70-
<SlidingChatPanel
71-
open={searchbox.isChatOpen}
72-
onClose={() => {
73-
searchbox.closeChatAndReset(() => {
74-
searchInputRef.current?.focus();
75-
});
76-
}}
77-
/>
78-
)}
79-
</>
80-
);
81-
};
17+
import { InnerSearchboxModal } from './InnerSearchboxModal';
8218

8319
const Searchbox: FC = () => {
8420
const searchbox = useSearchbox();
8521
const orama = useOrama();
8622
const t = useTranslations();
8723

88-
useEffect(() => {
89-
const handleKeyDown = (e: KeyboardEvent): void => {
90-
if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
91-
e.preventDefault();
92-
searchbox.toggleModal();
93-
}
94-
if (e.key === 'Escape') {
95-
searchbox.closeModal();
96-
}
97-
};
98-
document.addEventListener('keydown', handleKeyDown);
99-
return () => {
100-
document.removeEventListener('keydown', handleKeyDown);
101-
};
102-
}, [searchbox]);
103-
10424
return (
10525
<div className={styles.searchboxContainer}>
106-
<button
107-
type="button"
108-
data-testid="orama-button"
109-
onClick={searchbox.toggleModal}
110-
disabled={!orama}
111-
className={styles.searchButton}
112-
>
113-
<div className={styles.searchButtonContent}>
114-
<MagnifyingGlassIcon />
115-
{t('components.search.searchPlaceholder')}
116-
</div>
117-
<span className={styles.searchButtonShortcut}>⌘ K</span>
118-
</button>
119-
120-
<Modal.Wrapper
121-
open={searchbox.isOpen}
122-
onModalClosed={searchbox.closeModal}
123-
closeOnOutsideClick
124-
closeOnEscape
125-
className={styles.modalWrapper}
126-
>
127-
<Modal.Inner className={styles.modalInner}>
128-
<Modal.Content className={styles.modalContent}>
129-
<InnerSearchboxModal onClose={searchbox.closeModal} />
130-
</Modal.Content>
131-
</Modal.Inner>
132-
</Modal.Wrapper>
26+
<Modal.Root>
27+
<Modal.Trigger
28+
type="button"
29+
data-testid="orama-button"
30+
onClick={searchbox.toggleModal}
31+
disabled={!orama}
32+
enableCmdK
33+
className={styles.searchButton}
34+
>
35+
<div className={styles.searchButtonContent}>
36+
<MagnifyingGlassIcon />
37+
{t('components.search.searchPlaceholder')}
38+
</div>
39+
<span className={styles.searchButtonShortcut}>⌘ K</span>
40+
</Modal.Trigger>
41+
42+
<Modal.Wrapper
43+
open={searchbox.isOpen}
44+
onModalClosed={searchbox.closeModal}
45+
closeOnOutsideClick
46+
closeOnEscape
47+
className={styles.modalWrapper}
48+
>
49+
<Modal.Inner className={styles.modalInner}>
50+
<Modal.Content className={styles.modalContent}>
51+
<InnerSearchboxModal onClose={searchbox.closeModal} />
52+
</Modal.Content>
53+
</Modal.Inner>
54+
</Modal.Wrapper>
55+
</Modal.Root>
13356
</div>
13457
);
13558
};
@@ -138,8 +61,8 @@ const OramaSearch: FC<PropsWithChildren> = () => {
13861
const orama = useOrama();
13962

14063
return (
141-
<SearchRoot client={orama}>
142-
<ChatRoot client={orama} askOptions={{ throttle_delay: 50 }}>
64+
<SearchRoot client={orama ?? null}>
65+
<ChatRoot client={orama ?? null} askOptions={{ throttle_delay: 50 }}>
14366
<SearchboxProvider>
14467
<Searchbox />
14568
</SearchboxProvider>

‎apps/site/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343
"@opentelemetry/instrumentation": "~0.206.0",
4444
"@opentelemetry/resources": "~1.30.1",
4545
"@orama/core": "^1.2.13",
46-
"@orama/ui": "^1.2.1",
46+
"@orama/ui": "^1.3.2",
4747
"@opentelemetry/sdk-logs": "~0.206.0",
4848
"@radix-ui/react-tabs": "^1.1.13",
4949
"@radix-ui/react-tooltip": "^1.2.8",

‎apps/site/providers/oramaProvider.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
'use client';
2+
13
import { OramaCloud } from '@orama/core';
24
import { createContext, useContext, useMemo } from 'react';
35

@@ -6,7 +8,7 @@ import {
68
ORAMA_CLOUD_READ_API_KEY,
79
} from '#site/next.constants.mjs';
810

9-
const OramaContext = createContext<OramaCloud | null>(null);
11+
const OramaContext = createContext<OramaCloud | undefined>(undefined);
1012

1113
export const OramaProvider = ({ children }: { children: React.ReactNode }) => {
1214
const instance = useMemo(() => {
@@ -16,7 +18,6 @@ export const OramaProvider = ({ children }: { children: React.ReactNode }) => {
1618
apiKey: ORAMA_CLOUD_READ_API_KEY,
1719
});
1820
}
19-
return null;
2021
}, []);
2122
return (
2223
<OramaContext.Provider value={instance}>{children}</OramaContext.Provider>

‎pnpm-lock.yaml‎

Lines changed: 6 additions & 6 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)