@docyrus/ui-pro-ai-assistant 0.0.1

package/src/hooks/use-project-state.ts

@@ -0,0 +1,347 @@
+import { useCallback, useMemo, useReducer } from 'react';
+
+import { type AssistantSession, type Project, type Work } from '../types';
+
+// State type
+export interface ProjectState {
+  // View state
+  view: 'list' | 'create' | 'conversation';
+  selectedProject: Project | null;
+  projectContext: { name: string; id: string; message: string } | null;
+
+  // Data
+  projects: Project[];
+  projectsLoaded: boolean;
+  projectThreads: Record<string, AssistantSession[]>;
+  projectWorks: Record<string, Work[]>;
+
+  // Edit state
+  isEditing: boolean;
+  isSaving: boolean;
+  isDeleting: boolean;
+  isDeleteDialogOpen: boolean;
+  name: string;
+  description: string;
+
+  // Form state (for create)
+  form: { name: string; description: string };
+  isCreating: boolean;
+
+  // Instructions
+  isEditingInstructions: boolean;
+  instructions: string;
+  isSavingInstructions: boolean;
+}
+
+// Action types
+type ProjectAction
+  = | { type: 'SET_VIEW'; payload: 'list' | 'create' | 'conversation' }
+    | { type: 'SELECT_PROJECT'; payload: Project | null }
+    | { type: 'SET_CONTEXT'; payload: { name: string; id: string; message: string } | null }
+    | { type: 'SET_PROJECTS'; payload: Project[] }
+    | { type: 'SET_PROJECTS_LOADED'; payload: boolean }
+    | { type: 'SET_PROJECT_THREADS'; payload: { projectId: string; threads: AssistantSession[] } }
+    | { type: 'SET_PROJECT_WORKS'; payload: { projectId: string; works: Work[] } }
+    | { type: 'START_EDITING' }
+    | { type: 'STOP_EDITING' }
+    | { type: 'SET_SAVING'; payload: boolean }
+    | { type: 'SET_DELETING'; payload: boolean }
+    | { type: 'SET_DELETE_DIALOG'; payload: boolean }
+    | { type: 'SET_NAME'; payload: string }
+    | { type: 'SET_DESCRIPTION'; payload: string }
+    | { type: 'SET_FORM'; payload: { name: string; description: string } }
+    | { type: 'SET_CREATING'; payload: boolean }
+    | { type: 'START_EDITING_INSTRUCTIONS' }
+    | { type: 'STOP_EDITING_INSTRUCTIONS' }
+    | { type: 'SET_INSTRUCTIONS'; payload: string }
+    | { type: 'SET_SAVING_INSTRUCTIONS'; payload: boolean }
+    | { type: 'ADD_PROJECT'; payload: Project }
+    | { type: 'UPDATE_PROJECT'; payload: Project }
+    | { type: 'REMOVE_PROJECT'; payload: string }
+    | { type: 'RESET' };
+
+// Initial state
+const initialState: ProjectState = {
+  view: 'list',
+  selectedProject: null,
+  projectContext: null,
+  projects: [],
+  projectsLoaded: false,
+  projectThreads: {},
+  projectWorks: {},
+  isEditing: false,
+  isSaving: false,
+  isDeleting: false,
+  isDeleteDialogOpen: false,
+  name: '',
+  description: '',
+  form: { name: '', description: '' },
+  isCreating: false,
+  isEditingInstructions: false,
+  instructions: '',
+  isSavingInstructions: false
+};
+
+// Reducer
+function projectReducer(state: ProjectState, action: ProjectAction): ProjectState {
+  switch (action.type) {
+    case 'SET_VIEW':
+      return { ...state, view: action.payload };
+
+    case 'SELECT_PROJECT':
+      return {
+        ...state,
+        selectedProject: action.payload,
+        name: action.payload?.name || '',
+        description: action.payload?.description || '',
+        instructions: action.payload?.instructions || ''
+      };
+
+    case 'SET_CONTEXT':
+      return { ...state, projectContext: action.payload };
+
+    case 'SET_PROJECTS':
+      return { ...state, projects: action.payload };
+
+    case 'SET_PROJECTS_LOADED':
+      return { ...state, projectsLoaded: action.payload };
+
+    case 'SET_PROJECT_THREADS':
+      return {
+        ...state,
+        projectThreads: {
+          ...state.projectThreads,
+          [action.payload.projectId]: action.payload.threads
+        }
+      };
+
+    case 'SET_PROJECT_WORKS':
+      return {
+        ...state,
+        projectWorks: {
+          ...state.projectWorks,
+          [action.payload.projectId]: action.payload.works
+        }
+      };
+
+    case 'START_EDITING':
+      return { ...state, isEditing: true };
+
+    case 'STOP_EDITING':
+      return { ...state, isEditing: false };
+
+    case 'SET_SAVING':
+      return { ...state, isSaving: action.payload };
+
+    case 'SET_DELETING':
+      return { ...state, isDeleting: action.payload };
+
+    case 'SET_DELETE_DIALOG':
+      return { ...state, isDeleteDialogOpen: action.payload };
+
+    case 'SET_NAME':
+      return { ...state, name: action.payload };
+
+    case 'SET_DESCRIPTION':
+      return { ...state, description: action.payload };
+
+    case 'SET_FORM':
+      return { ...state, form: action.payload };
+
+    case 'SET_CREATING':
+      return { ...state, isCreating: action.payload };
+
+    case 'START_EDITING_INSTRUCTIONS':
+      return { ...state, isEditingInstructions: true };
+
+    case 'STOP_EDITING_INSTRUCTIONS':
+      return { ...state, isEditingInstructions: false };
+
+    case 'SET_INSTRUCTIONS':
+      return { ...state, instructions: action.payload };
+
+    case 'SET_SAVING_INSTRUCTIONS':
+      return { ...state, isSavingInstructions: action.payload };
+
+    case 'ADD_PROJECT':
+      return { ...state, projects: [...state.projects, action.payload] };
+
+    case 'UPDATE_PROJECT':
+      return {
+        ...state,
+        projects: state.projects.map(p => (p.id === action.payload.id ? action.payload : p)),
+        selectedProject: state.selectedProject?.id === action.payload.id ? action.payload : state.selectedProject
+      };
+
+    case 'REMOVE_PROJECT':
+      return {
+        ...state,
+        projects: state.projects.filter(p => p.id !== action.payload),
+        selectedProject: state.selectedProject?.id === action.payload ? null : state.selectedProject
+      };
+
+    case 'RESET':
+      return initialState;
+
+    default:
+      return state;
+  }
+}
+
+// Hook
+export function useProjectState() {
+  const [state, dispatch] = useReducer(projectReducer, initialState);
+
+  const setView = useCallback((view: 'list' | 'create' | 'conversation') => {
+    dispatch({ type: 'SET_VIEW', payload: view });
+  }, []);
+
+  const selectProject = useCallback((project: Project | null) => {
+    dispatch({ type: 'SELECT_PROJECT', payload: project });
+  }, []);
+
+  const setContext = useCallback((context: { name: string; id: string; message: string } | null) => {
+    dispatch({ type: 'SET_CONTEXT', payload: context });
+  }, []);
+
+  const setProjects = useCallback((projects: Project[]) => {
+    dispatch({ type: 'SET_PROJECTS', payload: projects });
+  }, []);
+
+  const setProjectsLoaded = useCallback((loaded: boolean) => {
+    dispatch({ type: 'SET_PROJECTS_LOADED', payload: loaded });
+  }, []);
+
+  const setProjectThreads = useCallback((projectId: string, threads: AssistantSession[]) => {
+    dispatch({ type: 'SET_PROJECT_THREADS', payload: { projectId, threads } });
+  }, []);
+
+  const setProjectWorks = useCallback((projectId: string, works: Work[]) => {
+    dispatch({ type: 'SET_PROJECT_WORKS', payload: { projectId, works } });
+  }, []);
+
+  const startEditing = useCallback(() => {
+    dispatch({ type: 'START_EDITING' });
+  }, []);
+
+  const stopEditing = useCallback(() => {
+    dispatch({ type: 'STOP_EDITING' });
+  }, []);
+
+  const setSaving = useCallback((saving: boolean) => {
+    dispatch({ type: 'SET_SAVING', payload: saving });
+  }, []);
+
+  const setDeleting = useCallback((deleting: boolean) => {
+    dispatch({ type: 'SET_DELETING', payload: deleting });
+  }, []);
+
+  const setDeleteDialogOpen = useCallback((open: boolean) => {
+    dispatch({ type: 'SET_DELETE_DIALOG', payload: open });
+  }, []);
+
+  const setName = useCallback((name: string) => {
+    dispatch({ type: 'SET_NAME', payload: name });
+  }, []);
+
+  const setDescription = useCallback((description: string) => {
+    dispatch({ type: 'SET_DESCRIPTION', payload: description });
+  }, []);
+
+  const setForm = useCallback((form: { name: string; description: string }) => {
+    dispatch({ type: 'SET_FORM', payload: form });
+  }, []);
+
+  const setCreating = useCallback((creating: boolean) => {
+    dispatch({ type: 'SET_CREATING', payload: creating });
+  }, []);
+
+  const startEditingInstructions = useCallback(() => {
+    dispatch({ type: 'START_EDITING_INSTRUCTIONS' });
+  }, []);
+
+  const stopEditingInstructions = useCallback(() => {
+    dispatch({ type: 'STOP_EDITING_INSTRUCTIONS' });
+  }, []);
+
+  const setInstructions = useCallback((instructions: string) => {
+    dispatch({ type: 'SET_INSTRUCTIONS', payload: instructions });
+  }, []);
+
+  const setSavingInstructions = useCallback((saving: boolean) => {
+    dispatch({ type: 'SET_SAVING_INSTRUCTIONS', payload: saving });
+  }, []);
+
+  const addProject = useCallback((project: Project) => {
+    dispatch({ type: 'ADD_PROJECT', payload: project });
+  }, []);
+
+  const updateProject = useCallback((project: Project) => {
+    dispatch({ type: 'UPDATE_PROJECT', payload: project });
+  }, []);
+
+  const removeProject = useCallback((id: string) => {
+    dispatch({ type: 'REMOVE_PROJECT', payload: id });
+  }, []);
+
+  const reset = useCallback(() => {
+    dispatch({ type: 'RESET' });
+  }, []);
+
+  const actions = useMemo(
+    () => ({
+      setView,
+      selectProject,
+      setContext,
+      setProjects,
+      setProjectsLoaded,
+      setProjectThreads,
+      setProjectWorks,
+      startEditing,
+      stopEditing,
+      setSaving,
+      setDeleting,
+      setDeleteDialogOpen,
+      setName,
+      setDescription,
+      setForm,
+      setCreating,
+      startEditingInstructions,
+      stopEditingInstructions,
+      setInstructions,
+      setSavingInstructions,
+      addProject,
+      updateProject,
+      removeProject,
+      reset
+    }),
+    [
+      setView,
+      selectProject,
+      setContext,
+      setProjects,
+      setProjectsLoaded,
+      setProjectThreads,
+      setProjectWorks,
+      startEditing,
+      stopEditing,
+      setSaving,
+      setDeleting,
+      setDeleteDialogOpen,
+      setName,
+      setDescription,
+      setForm,
+      setCreating,
+      startEditingInstructions,
+      stopEditingInstructions,
+      setInstructions,
+      setSavingInstructions,
+      addProject,
+      updateProject,
+      removeProject,
+      reset
+    ]
+  );
+
+  return { state, actions };
+}

package/src/hooks/use-session-state.ts

@@ -0,0 +1,207 @@
+import { useCallback, useMemo, useReducer } from 'react';
+
+import { type AssistantSession } from '../types';
+
+// State type
+export interface SessionState {
+  sessions: AssistantSession[];
+  selectedSessionId: string | null;
+  selectedSession: AssistantSession | null;
+  isEditing: boolean;
+  isDeleting: boolean;
+  isDeleteDialogOpen: boolean;
+  name: string;
+  isSaving: boolean;
+  searchQuery: string;
+}
+
+// Action types
+type SessionAction
+  = | { type: 'SET_SESSIONS'; payload: AssistantSession[] }
+    | { type: 'SELECT_SESSION_ID'; payload: string | null }
+    | { type: 'SELECT_SESSION'; payload: AssistantSession | null }
+    | { type: 'START_EDITING' }
+    | { type: 'STOP_EDITING' }
+    | { type: 'SET_DELETING'; payload: boolean }
+    | { type: 'SET_DELETE_DIALOG'; payload: boolean }
+    | { type: 'SET_NAME'; payload: string }
+    | { type: 'SET_SAVING'; payload: boolean }
+    | { type: 'SET_SEARCH_QUERY'; payload: string }
+    | { type: 'ADD_SESSION'; payload: AssistantSession }
+    | { type: 'UPDATE_SESSION'; payload: AssistantSession }
+    | { type: 'REMOVE_SESSION'; payload: string }
+    | { type: 'RESET' };
+
+// Initial state
+const initialState: SessionState = {
+  sessions: [],
+  selectedSessionId: null,
+  selectedSession: null,
+  isEditing: false,
+  isDeleting: false,
+  isDeleteDialogOpen: false,
+  name: '',
+  isSaving: false,
+  searchQuery: ''
+};
+
+// Reducer
+function sessionReducer(state: SessionState, action: SessionAction): SessionState {
+  switch (action.type) {
+    case 'SET_SESSIONS':
+      return { ...state, sessions: action.payload };
+
+    case 'SELECT_SESSION_ID':
+      return { ...state, selectedSessionId: action.payload };
+
+    case 'SELECT_SESSION':
+      return {
+        ...state,
+        selectedSession: action.payload,
+        name: action.payload?.title || ''
+      };
+
+    case 'START_EDITING':
+      return { ...state, isEditing: true };
+
+    case 'STOP_EDITING':
+      return { ...state, isEditing: false };
+
+    case 'SET_DELETING':
+      return { ...state, isDeleting: action.payload };
+
+    case 'SET_DELETE_DIALOG':
+      return { ...state, isDeleteDialogOpen: action.payload };
+
+    case 'SET_NAME':
+      return { ...state, name: action.payload };
+
+    case 'SET_SAVING':
+      return { ...state, isSaving: action.payload };
+
+    case 'SET_SEARCH_QUERY':
+      return { ...state, searchQuery: action.payload };
+
+    case 'ADD_SESSION':
+      return { ...state, sessions: [action.payload, ...state.sessions] };
+
+    case 'UPDATE_SESSION':
+      return {
+        ...state,
+        sessions: state.sessions.map(s => (s.id === action.payload.id ? action.payload : s)),
+        selectedSession: state.selectedSession?.id === action.payload.id ? action.payload : state.selectedSession
+      };
+
+    case 'REMOVE_SESSION':
+      return {
+        ...state,
+        sessions: state.sessions.filter(s => s.id !== action.payload),
+        selectedSession: state.selectedSession?.id === action.payload ? null : state.selectedSession,
+        selectedSessionId: state.selectedSessionId === action.payload ? null : state.selectedSessionId
+      };
+
+    case 'RESET':
+      return initialState;
+
+    default:
+      return state;
+  }
+}
+
+// Hook
+export function useSessionState() {
+  const [state, dispatch] = useReducer(sessionReducer, initialState);
+
+  const setSessions = useCallback((sessions: AssistantSession[]) => {
+    dispatch({ type: 'SET_SESSIONS', payload: sessions });
+  }, []);
+
+  const selectSessionId = useCallback((id: string | null) => {
+    dispatch({ type: 'SELECT_SESSION_ID', payload: id });
+  }, []);
+
+  const selectSession = useCallback((session: AssistantSession | null) => {
+    dispatch({ type: 'SELECT_SESSION', payload: session });
+  }, []);
+
+  const startEditing = useCallback(() => {
+    dispatch({ type: 'START_EDITING' });
+  }, []);
+
+  const stopEditing = useCallback(() => {
+    dispatch({ type: 'STOP_EDITING' });
+  }, []);
+
+  const setDeleting = useCallback((deleting: boolean) => {
+    dispatch({ type: 'SET_DELETING', payload: deleting });
+  }, []);
+
+  const setDeleteDialogOpen = useCallback((open: boolean) => {
+    dispatch({ type: 'SET_DELETE_DIALOG', payload: open });
+  }, []);
+
+  const setName = useCallback((name: string) => {
+    dispatch({ type: 'SET_NAME', payload: name });
+  }, []);
+
+  const setSaving = useCallback((saving: boolean) => {
+    dispatch({ type: 'SET_SAVING', payload: saving });
+  }, []);
+
+  const setSearchQuery = useCallback((query: string) => {
+    dispatch({ type: 'SET_SEARCH_QUERY', payload: query });
+  }, []);
+
+  const addSession = useCallback((session: AssistantSession) => {
+    dispatch({ type: 'ADD_SESSION', payload: session });
+  }, []);
+
+  const updateSession = useCallback((session: AssistantSession) => {
+    dispatch({ type: 'UPDATE_SESSION', payload: session });
+  }, []);
+
+  const removeSession = useCallback((id: string) => {
+    dispatch({ type: 'REMOVE_SESSION', payload: id });
+  }, []);
+
+  const reset = useCallback(() => {
+    dispatch({ type: 'RESET' });
+  }, []);
+
+  const actions = useMemo(
+    () => ({
+      setSessions,
+      selectSessionId,
+      selectSession,
+      startEditing,
+      stopEditing,
+      setDeleting,
+      setDeleteDialogOpen,
+      setName,
+      setSaving,
+      setSearchQuery,
+      addSession,
+      updateSession,
+      removeSession,
+      reset
+    }),
+    [
+      setSessions,
+      selectSessionId,
+      selectSession,
+      startEditing,
+      stopEditing,
+      setDeleting,
+      setDeleteDialogOpen,
+      setName,
+      setSaving,
+      setSearchQuery,
+      addSession,
+      updateSession,
+      removeSession,
+      reset
+    ]
+  );
+
+  return { state, actions };
+}

package/src/hooks/use-speech-recognition.ts

@@ -0,0 +1,137 @@
+'use client';
+
+import {
+  useCallback, useEffect, useRef, useState
+} from 'react';
+
+import {
+  type SpeechRecognitionErrorEvent,
+  type SpeechRecognitionEvent,
+  type SpeechRecognitionInstance
+} from '../types';
+
+declare global {
+  interface Window {
+    SpeechRecognition: new () => SpeechRecognitionInstance;
+    webkitSpeechRecognition: new () => SpeechRecognitionInstance;
+  }
+}
+
+interface UseSpeechRecognitionOptions {
+  enabled?: boolean;
+  language?: string;
+  onTranscript?: (transcript: string) => void;
+  onStart?: () => void;
+  onEnd?: () => void;
+}
+
+interface UseSpeechRecognitionReturn {
+  isRecording: boolean;
+  recognition: SpeechRecognitionInstance | null;
+  handleMicrophoneClick: () => void;
+}
+
+/**
+ * Hook for speech recognition functionality
+ * Handles browser speech recognition API with callbacks for transcripts
+ */
+export function useSpeechRecognition({
+  enabled = false,
+  language = 'en-US',
+  onTranscript,
+  onStart,
+  onEnd
+}: UseSpeechRecognitionOptions): UseSpeechRecognitionReturn {
+  const [isRecording, setIsRecording] = useState(false);
+
+  // Use refs to avoid re-renders and infinite loops
+  const recognitionRef = useRef<SpeechRecognitionInstance | null>(null);
+  const onTranscriptRef = useRef(onTranscript);
+  const onStartRef = useRef(onStart);
+  const onEndRef = useRef(onEnd);
+
+  // Keep callback refs updated
+  useEffect(() => {
+    onTranscriptRef.current = onTranscript;
+    onStartRef.current = onStart;
+    onEndRef.current = onEnd;
+  }, [onTranscript, onStart, onEnd]);
+
+  // Initialize speech recognition (only once when enabled changes)
+  useEffect(() => {
+    if (!enabled || typeof window === 'undefined') {
+      recognitionRef.current = null;
+
+      return;
+    }
+
+    try {
+      const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+
+      if (SpeechRecognition) {
+        const recognitionInstance = new SpeechRecognition();
+
+        recognitionInstance.continuous = false;
+        recognitionInstance.interimResults = false;
+        recognitionInstance.lang = language;
+
+        recognitionInstance.onstart = () => {
+          setIsRecording(true);
+          onStartRef.current?.();
+        };
+
+        recognitionInstance.onresult = (event: SpeechRecognitionEvent) => {
+          if (event.results && event.results.length > 0) {
+            const { transcript } = event.results[0][0];
+
+            onTranscriptRef.current?.(transcript);
+          }
+          setIsRecording(false);
+        };
+
+        recognitionInstance.onerror = (event: SpeechRecognitionErrorEvent) => {
+          console.error('Speech recognition error:', event.error);
+          setIsRecording(false);
+        };
+
+        recognitionInstance.onend = () => {
+          setIsRecording(false);
+          onEndRef.current?.();
+        };
+
+        recognitionRef.current = recognitionInstance;
+      }
+    } catch (error) {
+      console.error('Error initializing speech recognition:', error);
+    }
+  }, [enabled, language]);
+
+  const handleMicrophoneClick = useCallback(() => {
+    const recognition = recognitionRef.current;
+
+    if (!recognition) return;
+
+    if (isRecording) {
+      try {
+        recognition.stop();
+        setIsRecording(false);
+      } catch (error) {
+        console.error('Error stopping speech recognition:', error);
+        setIsRecording(false);
+      }
+    } else {
+      try {
+        recognition.start();
+      } catch (error) {
+        console.error('Error starting speech recognition:', error);
+        setIsRecording(false);
+      }
+    }
+  }, [isRecording]);
+
+  return {
+    isRecording,
+    recognition: recognitionRef.current,
+    handleMicrophoneClick
+  };
+}