feat: sidepanel experience #3
Conversation
✅ Deploy Preview for sitesearch-docs ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| const BASE_ASKAI_URL = "https://askai.algolia.com"; | ||
| const TOKEN_KEY = "askai_token"; | ||
|
|
||
| type TokenPayload = { exp: number }; | ||
|
|
||
| const decode = (token: string): TokenPayload => { | ||
| const [b64] = token.split("."); | ||
| return JSON.parse(atob(b64)); | ||
| }; | ||
|
|
||
| const isExpired = (token?: string | null): boolean => { | ||
| if (!token) return true; | ||
| try { | ||
| const { exp } = decode(token); | ||
| // refresh 30 s before the backend rejects it | ||
| return Date.now() / 1000 > exp - 30; | ||
| } catch { | ||
| return true; | ||
| } | ||
| }; | ||
|
|
||
| let inflight: Promise<string> | null = null; | ||
|
|
||
| // call /token once, cache the promise while it’s running | ||
| // eslint-disable-next-line require-await | ||
| export const getValidToken = async ({ | ||
| assistantId, | ||
| }: { | ||
| assistantId: string; | ||
| }): Promise<string> => { | ||
| const cached = sessionStorage.getItem(TOKEN_KEY); | ||
| if (!isExpired(cached)) return cached as string; | ||
|
|
||
| if (!inflight) { | ||
| inflight = fetch(`${BASE_ASKAI_URL}/chat/token`, { | ||
| method: "POST", | ||
| headers: { | ||
| "x-algolia-assistant-id": assistantId, | ||
| "content-type": "application/json", | ||
| }, | ||
| }) | ||
| .then((r) => r.json()) | ||
| .then(({ token }) => { | ||
| sessionStorage.setItem(TOKEN_KEY, token); | ||
| return token; | ||
| }) | ||
| .finally(() => { | ||
| inflight = null; | ||
| }); | ||
| } | ||
|
|
||
| return inflight; | ||
| }; | ||
|
|
||
| export const postFeedback = async ({ | ||
| assistantId, | ||
| thumbs, | ||
| messageId, | ||
| appId, | ||
| }: { | ||
| assistantId: string; | ||
| thumbs: 0 | 1; | ||
| messageId: string; | ||
| appId: string; | ||
| }): Promise<Response> => { | ||
| const headers = new Headers(); | ||
| headers.set("x-algolia-assistant-id", assistantId); | ||
| headers.set("content-type", "application/json"); | ||
|
|
||
| const token = await getValidToken({ assistantId }); | ||
| headers.set("authorization", `TOKEN ${token}`); | ||
|
|
||
| return fetch(`${BASE_ASKAI_URL}/chat/feedback`, { | ||
| method: "POST", |
There was a problem hiding this comment.
The hook accepts baseAskaiUrl and uses it to construct the chat transport, but the helper utilities still hit the hard‑coded https://askai.algolia.com for /chat/token and /chat/feedback. If a consumer points baseAskaiUrl at a staging or self‑hosted Ask AI backend, chat requests go to the custom base while token and feedback requests are sent to production and will fail with 401s. These helpers should derive their URLs from the same baseAskaiUrl value (or expose a way to override them) to keep all calls pointed at the same environment.
Useful? React with 👍 / 👎.
Add Sidepanel Ask AI Experience
Adds a sidepanel chat experience for Algolia Ask AI that opens from the right without blocking the page.
Features
Cmd+I(Mac) /Ctrl+I(Windows) to toggleImplementation
sidepanel-askai/components/sidepanel-ai.tsxuseAskaihook from search-askai experienceUse Cases