Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 22x 22x 22x 22x 22x 22x 22x 22x 22x 10x 1x 10x 10x 22x 22x 11x 11x 11x 11x 11x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x | import { CopilotKit } from '@copilotkit/react-core';
import { CopilotSidebar } from '@copilotkit/react-ui';
import { useEffect, useState } from 'react';
// Styles
import '@copilotkit/react-ui/styles.css';
import '../Chatbot/chatbot-sidebar.css';
// Components
import { SearchBar } from '.';
// Constants
import { UserRole } from '@shared/constants';
// Providers
import { useAuthContext } from '@/providers';
import { auth } from '@/services';
import { onAuthStateChanged, User } from 'firebase/auth';
import { cookieStorage } from '@shared/utils';
import { getCookieArray } from '@/utils/cookies';
import { COOKIE_KEYS } from '@/constants/auth';
import { COPILOTKIT_AGENTS } from '@/constants/chatbot';
export const WithCopilotKitHeadless = ({ email }: { email: string }) => {
const { user: userProfile } = useAuthContext();
const isUser = userProfile?.role === UserRole.USER;
const [token, setToken] = useState<string | null>(null);
const [user, setUser] = useState<User | null>(null);
const currentUserGroups = getCookieArray(COOKIE_KEYS.USER_GROUPS);
// Keep threadId fixed across re-renders, otherwise CopilotKit starts a new
// thread and wipes the messages.
const [threadId] = useState(
() => `thread-kitchen-search-${new Date().getTime()}`,
);
useEffect(() => {
const unsubscribe = onAuthStateChanged(auth, (user) => {
setUser(user);
});
return () => unsubscribe();
}, []);
useEffect(() => {
// Fetch the token from Firebase or any other auth service
const fetchToken = async () => {
const token = await user?.getIdToken(true);
setToken(token || '');
};
fetchToken();
}, [user]);
return (
<CopilotKit
threadId={threadId}
showDevConsole={false}
runtimeUrl={`${COPILOTKIT_AGENTS.ENDPOINT}${COPILOTKIT_AGENTS.SEARCH_ROUTE}`}
agent={COPILOTKIT_AGENTS.SEARCH_AGENT}
headers={{
Authorization: `token=${token}&project_code=&isUser=${isUser}&email=${email}&userGroups=${currentUserGroups}`,
}}
properties={{
isUser,
email,
token,
userGroups: currentUserGroups,
}}
>
<SearchBar
requestConfig={{
token: token || '',
userEmail: email,
}}
/>
<CopilotSidebar
className="copilotKitHeadless"
defaultOpen={false}
instructions={
'You are assisting the user as best as you can. Answer in the best way possible given the data you have.'
}
labels={{
title: 'Sidebar Agility Flash',
initial: 'How can I help you today?',
}}
/>
</CopilotKit>
);
};
|