All files / src/components/SearchBarWithAI WithCopilotKitHeadless.tsx

100% Statements 65/65
100% Branches 10/10
100% Functions 2/2
100% Lines 65/65

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 831x 1x 1x     1x 1x     1x     1x     1x 1x 1x   1x 1x 1x   1x 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);
 
  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={`thread-kitchen-search-${new Date().getTime()}`}
      showDevConsole={false}
      runtimeUrl={`${COPILOTKIT_AGENTS.ENDPOINT}${COPILOTKIT_AGENTS.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>
  );
};