Skip to content

Commit 171c504

Browse files
8bittitandylantientcheu
8bittitan
and
dylantientcheu
authored
feat(sidepanel): Introduce Ask AI Sidepanel (#2816)
* feat(sidepanel): Add sidepanel component for Ask AI (#2792) * feat(sidepanel): Initial working Sidepanel implementation * fix: circleci config * fix: set proper sidepanel export * Sidepanel props updates, conversation screen updates * Started mobile work * Style prompt input and header for mobile * fixes prompt input height, adds more translations, mobile updates, fixes panel height calculations * finish mobile, adds dark theme, minor fixes * fix: lock * Add missing titles to buttons * Have most recent conversation be at the bottom of the exchange list, scroll to newest conversation * fix: versions * move to floating variant being default for Sidepanel --------- Co-authored-by: Dylan Tientcheu <dylantientcheu@gmail.com> * feat(sidepanel): Sidepanel/Modal hybrid mode (#2799) * feat(sidepanel): Initial working Sidepanel implementation * fix: circleci config * fix: set proper sidepanel export * Sidepanel props updates, conversation screen updates * Started mobile work * Style prompt input and header for mobile * fixes prompt input height, adds more translations, mobile updates, fixes panel height calculations * finish mobile, adds dark theme, minor fixes * fix: lock * Add missing titles to buttons * Have most recent conversation be at the bottom of the exchange list, scroll to newest conversation * feat(sidepanel): Allow hybrid mode for Sidepanel and Modal * fix: yarn.lock * fix: tests - dont send new chat message from modal while in hybrid mode * Make docsearch core a true dependency * Cleanup handling the registered views Set --------- Co-authored-by: Dylan Tientcheu <dylantientcheu@gmail.com> * feat(sidepanel): Add sidepanel-js package for CDN (#2800) * feat(sidepanel): Initial working Sidepanel implementation * fix: circleci config * fix: set proper sidepanel export * Sidepanel props updates, conversation screen updates * Started mobile work * Style prompt input and header for mobile * fixes prompt input height, adds more translations, mobile updates, fixes panel height calculations * finish mobile, adds dark theme, minor fixes * fix: lock * Add missing titles to buttons * Have most recent conversation be at the bottom of the exchange list, scroll to newest conversation * feat(sidepanel): Add sidepanel-js package for CDN * fix: ci * fix: yarn.lock --------- Co-authored-by: Dylan Tientcheu <dylantientcheu@gmail.com> * feat(sidepanel): Sidepanel UI/UX tweaks (#2808) * fix(umd): Fixes global names for packages in UMD builds * chore: Update tsdeclaration files, update directory field in package json files * feat(sidepanel): Add Sidepanel documentation (#2811) * feat(sidepanel): Add Sidepanel documentation * Minor fixes and updates * Hybrid mode update * fix: hardcode yarn cache key for now --------- Co-authored-by: Dylan Tientcheu <dylantientcheu@gmail.com>
1 parent fd0de3d commit 171c504

File tree

83 files changed

+5054
-1064
lines changed

Some content is hidden

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

83 files changed

+5054
-1064
lines changed

‎.circleci/config.yml‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,11 @@ aliases:
44
- &restore_yarn_cache
55
name: Restore Yarn cache
66
keys:
7-
- yarn-packages-{{ checksum "yarn.lock" }}
7+
- yarn-packages-sidepanel-{{ checksum "yarn.lock" }}
88

99
- &save_yarn_cache
1010
name: Save Yarn cache
11-
key: yarn-packages-{{ checksum "yarn.lock" }}
11+
key: yarn-packages-sidepanel-{{ checksum "yarn.lock" }}
1212
paths:
1313
- .yarn/cache
1414
- .yarn/unplugged
@@ -27,12 +27,16 @@ aliases:
2727
mkdir -p packages/docsearch-css/dist
2828
mkdir -p packages/docsearch-core/dist
2929
mkdir -p packages/docsearch-modal/dist
30+
mkdir -p packages/docsearch-sidepanel/dist
31+
mkdir -p packages/docsearch-sidepanel-js/dist
3032
3133
cp -R /tmp/workspace/packages/docsearch-react/dist packages/docsearch-react
3234
cp -R /tmp/workspace/packages/docsearch-js/dist packages/docsearch-js
3335
cp -R /tmp/workspace/packages/docsearch-css/dist packages/docsearch-css
3436
cp -R /tmp/workspace/packages/docsearch-core/dist packages/docsearch-core
3537
cp -R /tmp/workspace/packages/docsearch-modal/dist packages/docsearch-modal
38+
cp -R /tmp/workspace/packages/docsearch-sidepanel/dist packages/docsearch-sidepanel
39+
cp -R /tmp/workspace/packages/docsearch-sidepanel-js/dist packages/docsearch-sidepanel-js
3640
3741
defaults: &defaults
3842
working_directory: ~/docsearch
@@ -75,12 +79,16 @@ jobs:
7579
mkdir -p /tmp/workspace/packages/docsearch-css/dist
7680
mkdir -p /tmp/workspace/packages/docsearch-core/dist
7781
mkdir -p /tmp/workspace/packages/docsearch-modal/dist
82+
mkdir -p /tmp/workspace/packages/docsearch-sidepanel/dist
83+
mkdir -p /tmp/workspace/packages/docsearch-sidepanel-js/dist
7884
7985
cp -R packages/docsearch-react/dist /tmp/workspace/packages/docsearch-react
8086
cp -R packages/docsearch-js/dist /tmp/workspace/packages/docsearch-js
8187
cp -R packages/docsearch-css/dist /tmp/workspace/packages/docsearch-css
8288
cp -R packages/docsearch-core/dist /tmp/workspace/packages/docsearch-core
8389
cp -R packages/docsearch-modal/dist /tmp/workspace/packages/docsearch-modal
90+
cp -R packages/docsearch-sidepanel/dist /tmp/workspace/packages/docsearch-sidepanel
91+
cp -R packages/docsearch-sidepanel-js/dist /tmp/workspace/packages/docsearch-sidepanel-js
8492
- persist_to_workspace:
8593
root: *workspace_root
8694
paths:

‎examples/demo-js/index.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@
1313
<h1>DocSearch v3 - Vanilla JavaScript</h1>
1414

1515
<div id="docsearch"></div>
16+
17+
<div id="docsearch-sidepanel"></div>
1618
</div>
1719

1820
<script type="module" src="/src/main.ts"></script>

‎examples/demo-js/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@
1111
},
1212
"dependencies": {
1313
"@docsearch/css": "4.3.2",
14-
"@docsearch/js": "4.3.2"
14+
"@docsearch/js": "4.3.2",
15+
"@docsearch/sidepanel-js": "4.3.2"
1516
},
1617
"devDependencies": {
1718
"vite": "^6.0.7"

‎examples/demo-js/src/main.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import type { AutocompleteState } from '@algolia/autocomplete-core';
22
import docsearch from '@docsearch/js';
33
import type { TemplateHelpers } from '@docsearch/js';
4+
import sidepanel from '@docsearch/sidepanel-js';
45

56
import './app.css';
67
import '@docsearch/css/dist/style.css';
8+
import '@docsearch/css/dist/sidepanel.css';
79

810
docsearch({
911
container: '#docsearch',
@@ -23,3 +25,11 @@ docsearch({
2325
`;
2426
},
2527
});
28+
29+
sidepanel({
30+
container: '#docsearch-sidepanel',
31+
indexName: 'docsearch',
32+
appId: 'PMZUYBQDAK',
33+
apiKey: '24b09689d5b4223813d9b8e48563c8f6',
34+
assistantId: 'askAIDemo',
35+
});

‎examples/demo-react/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"@docsearch/css": "workspace:*",
1616
"@docsearch/modal": "workspace:*",
1717
"@docsearch/react": "workspace:*",
18+
"@docsearch/sidepanel": "workspace:*",
1819
"react": "^19.0.0",
1920
"react-dom": "^19.0.0"
2021
},

‎examples/demo-react/src/App.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,18 @@
11
/* eslint-disable react/react-in-jsx-scope */
22
import { version } from '@docsearch/react';
3+
import { DocSearchSidepanel } from '@docsearch/react/sidepanel';
34
import type { JSX } from 'react';
45

56
import './App.css';
67
import '@docsearch/css/dist/style.css';
8+
import '@docsearch/css/dist/sidepanel.css';
79

810
import Basic from './examples/basic';
911
import BasicAskAI from './examples/basic-askai';
1012
import Composable from './examples/composable';
1113
import Default from './examples/default';
1214
import DynamicImportModal from './examples/dynamic-import-modal';
15+
import BasicHybrid from './examples/hybrid';
1316
import MultiIndex from './examples/multi-index';
1417
import WHitComponent from './examples/w-hit-component';
1518
import WTransformItems from './examples/w-hit-transformItems';
@@ -87,8 +90,25 @@ function App(): JSX.Element {
8790
<WResultsFooter />
8891
</div>
8992
</section>
93+
94+
<section className="demo-section">
95+
<p className="section-description">sidepanel hybrid</p>
96+
<div className="search-wrapper">
97+
<BasicHybrid />
98+
</div>
99+
</section>
90100
</main>
91101
</div>
102+
103+
<DocSearchSidepanel
104+
assistantId="askAIDemo"
105+
indexName="docsearch"
106+
appId="PMZUYBQDAK"
107+
apiKey="24b09689d5b4223813d9b8e48563c8f6"
108+
panel={{
109+
suggestedQuestions: true,
110+
}}
111+
/>
92112
</div>
93113
);
94114
}

‎examples/demo-react/src/examples/hybrid.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
/* eslint-disable react/react-in-jsx-scope */
2+
import { DocSearch } from '@docsearch/core';
3+
import { DocSearchButton, DocSearchModal } from '@docsearch/modal';
4+
import { Sidepanel, SidepanelButton } from '@docsearch/sidepanel';
5+
import type { JSX } from 'react';
6+
7+
export default function BasicHybrid(): JSX.Element {
8+
return (
9+
<DocSearch>
10+
<DocSearchButton />
11+
<DocSearchModal
12+
indexName="docsearch"
13+
appId="PMZUYBQDAK"
14+
apiKey="24b09689d5b4223813d9b8e48563c8f6"
15+
askAi="askAIDemo"
16+
/>
17+
18+
<SidepanelButton />
19+
<Sidepanel
20+
indexName="docsearch"
21+
appId="PMZUYBQDAK"
22+
apiKey="24b09689d5b4223813d9b8e48563c8f6"
23+
assistantId="askAIDemo"
24+
/>
25+
</DocSearch>
26+
);
27+
}

‎examples/demo-react/src/examples/sidepanel.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
/* eslint-disable react/react-in-jsx-scope */
2+
import { DocSearch } from '@docsearch/core';
3+
import { SidepanelButton, Sidepanel } from '@docsearch/sidepanel';
4+
import type { JSX } from 'react';
5+
6+
export default function SidepanelExample(): JSX.Element {
7+
return (
8+
<DocSearch>
9+
<SidepanelButton variant="inline" />
10+
<Sidepanel
11+
indexName="docsearch"
12+
appId="PMZUYBQDAK"
13+
apiKey="24b09689d5b4223813d9b8e48563c8f6"
14+
assistantId="askAIDemo"
15+
variant="floating"
16+
/>
17+
</DocSearch>
18+
);
19+
}

‎packages/docsearch-core/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
"repository": {
88
"type": "git",
99
"url": "git+https://github.com/algolia/docsearch.git",
10-
"directory": "packages/docsearch-react"
10+
"directory": "packages/docsearch-core"
1111
},
1212
"author": {
1313
"name": "Algolia, Inc.",

‎packages/docsearch-core/rollup.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ function sourceOutput(fileName) {
2727
file: `dist/umd/${fileName}`,
2828
format: 'umd',
2929
sourcemap: true,
30-
name: pkg.name,
30+
name: 'DocSearchCore',
3131
banner: getBundleBanner(pkg),
3232
},
3333
{ dir: 'dist/esm', format: 'es' },

0 commit comments

Comments
 (0)