move into utils

packages/trace-viewer/src/ui/llm.tsx

@@ -16,6 +16,7 @@
 
 import * as React from 'react';
 import { EventEmitter } from '@testIsomorphic/events';
+import { useCookies } from '@web/uiUtils';
 
 export type LLMMessage = {
   role: 'user' | 'assistant' | 'developer';
@@ -198,22 +199,16 @@ class Conversation {
 
 const llmContext = React.createContext<LLMChat | undefined>(undefined);
 
-function parseCookie(cookie: string): [name: string, value: string][] {
-  return cookie.split(";").filter(v => v.includes("=")).map(kv => {
-    const separator = kv.indexOf("=");
-    return [kv.substring(0, separator), kv.substring(separator + 1)];
-  }) 
-}
-
 export function LLMProvider({ children }: React.PropsWithChildren<{}>) {
+  const cookies = useCookies();
   const chat = React.useMemo(() => {
-    for (const [name, value] of parseCookie(document.cookie)) {
+    for (const [name, value] of cookies) {
       if (name === 'openai_api_key')
         return new LLMChat(new OpenAI(value));
       if (name === 'anthropic_api_key')
         return new LLMChat(new Anthropic(value))
     }
-  }, []);
+  }, [cookies]);
   return <llmContext.Provider value={chat}>{children}</llmContext.Provider>;
 };
 

packages/trace-viewer/src/ui/uiModeView.tsx

@@ -399,7 +399,7 @@ export const UIModeView: React.FC<{}> = ({
     });
   }, [closeInstallDialog, testServerConnection]);
 
-  return <LLMProvider openai={queryParams.openai_api_key} anthropic={queryParams.anthropic_api_key}><div className='vbox ui-mode'>
+  return <LLMProvider><div className='vbox ui-mode'>
     {!hasBrowsers && <dialog ref={dialogRef}>
       <div className='title'><span className='codicon codicon-lightbulb'></span>Install browsers</div>
       <div className='body'>

packages/web/src/uiUtils.ts

@@ -248,3 +248,10 @@ export function useFlash(): [boolean, EffectCallback] {
   }, [setFlash]);
   return [flash, trigger];
 }
+
+export function useCookies() {
+  return document.cookie.split(";").filter(v => v.includes("=")).map(kv => {
+    const separator = kv.indexOf("=");
+    return [kv.substring(0, separator), kv.substring(separator + 1)];
+  }) 
+}