fix: update icons and persist audio interface setting (COR-000) (#182)

packages/react-chat/src/contexts/RuntimeContext/useRuntimeState.ts

@@ -9,6 +9,7 @@ import { IS_IOS } from '@/constants';
 import type { AssistantOptions } from '@/dtos/AssistantOptions.dto';
 import type { ChatConfig } from '@/dtos/ChatConfig.dto';
 import { useStateRef } from '@/hooks/useStateRef';
+import { useLocalStorageState } from '@/hooks/useStorage';
 import type { SendMessage, SessionOptions, TurnProps } from '@/types';
 import { SessionStatus, TurnType } from '@/types';
 import { handleActions } from '@/utils/actions';
@@ -40,7 +41,10 @@ export const useRuntimeState = ({ assistant, config, traceHandlers }: Settings)
   const [audio] = useState(() => new AudioController());
   const playAudiosStack = useRef<string[]>([]);
   const [isOpen, setOpen] = useState(false);
-  const [audioOutput, setAudioOutput, audioOutputRef] = useStateRef(assistant.defaultAudioOutput ?? false);
+  const [audioOutput, setAudioOutput, audioOutputRef] = useLocalStorageState(
+    'audio-output',
+    assistant.defaultAudioOutput ?? false
+  );
 
   const [session, setSession, sessionRef] = useStateRef<Required<SessionOptions>>(() => ({
     ...DEFAULT_SESSION_PARAMS,

packages/react-chat/src/hooks/useStorage.ts

@@ -0,0 +1,65 @@
+import { useCallback, useMemo, useRef, useState } from 'react';
+
+interface Storage {
+  getItem: (key: string) => string | null;
+  setItem: (key: string, value: string) => void;
+  removeItem: (key: string) => void;
+}
+
+const createUseStorageHook =
+  <S extends Storage>(storage: S) =>
+  <T>(name: string, defaultValue: T) =>
+    useMemo(() => {
+      const storageName = `voiceflow-chat-widget:${name}`;
+
+      return {
+        get: (): T => {
+          try {
+            const item = storage.getItem(storageName);
+
+            return item === null ? defaultValue : JSON.parse(item);
+          } catch {
+            return defaultValue;
+          }
+        },
+
+        set: (value: T) => storage.setItem(storageName, JSON.stringify(value)),
+
+        clear: () => storage.removeItem(storageName),
+      };
+    }, []);
+
+const createUseStorageStateHook = <S extends Storage>(storage: S) => {
+  const useStorage = createUseStorageHook(storage);
+
+  return <T>(name: string, initialState: T) => {
+    const storage = useStorage(name, initialState);
+    const [value, setValue] = useState(storage.get);
+    const ref = useRef(value);
+
+    const setStorageValue = useCallback<React.Dispatch<React.SetStateAction<T>>>((value) => {
+      setValue((prevState) => {
+        let nextValue: T;
+
+        if (typeof value === 'function') {
+          nextValue = (value as (prevState: T) => T)(prevState);
+        } else {
+          nextValue = value;
+        }
+
+        storage.set(nextValue);
+        ref.current = nextValue;
+
+        return nextValue;
+      });
+    }, []);
+
+    return [value, setStorageValue, ref] as const;
+  };
+};
+
+export const useLocalStorage = createUseStorageHook(globalThis.localStorage);
+export const useSessionStorage = createUseStorageHook(globalThis.localStorage);
+
+export const useLocalStorageState = createUseStorageStateHook(globalThis.localStorage);
+export const useSessionStorageState = createUseStorageStateHook(globalThis.sessionStorage);