implemented open sourced version websocket handler @bnk/websocket-man…

…ager

packages/client/package.json

@@ -11,6 +11,7 @@
     "test:watch": "bun test --watch"
   },
   "dependencies": {
+    "@bnk/websocket-manager-react": "^1.0.6",
     "@hookform/resolvers": "^3.9.1",
     "@radix-ui/react-alert-dialog": "^1.1.4",
     "@radix-ui/react-avatar": "^1.1.2",

packages/client/src/components/app-navbar.tsx

@@ -12,8 +12,9 @@ import { FolderIcon, MessageSquareIcon, KeyIcon, Settings, HelpCircle, ScanEye }
 import { useQuery } from "@tanstack/react-query"
 import { useApi } from "@/hooks/use-api"
 import { HelpDialog } from "@/components/help-dialog"
-import { useGlobalStateContext } from "./global-state-context"
 import { SettingsDialog } from "@/components/settings/settings-dialog"
+import { useGlobalState, } from '../components/websocket-config-context'
+import { useGlobalStateHelpers } from "./use-global-state-helpers"
 
 export function AppNavbar() {
     const [openDialog, setOpenDialog] = useState(false)
@@ -28,13 +29,13 @@ export function AppNavbar() {
     const isOnProjectsRoute = matches.some(match => match.routeId === "/projects")
     const isOnKeysRoute = matches.some(match => match.routeId === "/keys")
 
-    const { activeProjectTabState: activeTabState, updateActiveProjectTab: updateActiveTab, updateGlobalStateKey } = useGlobalStateContext()
+    const { activeProjectTabState: activeTabState, updateActiveProjectTab: updateActiveTab, updateGlobalStateKey, } = useGlobalStateHelpers()
     const selectedProjectId = activeTabState?.selectedProjectId
     const navigate = useNavigate()
     const { data: projectData, isLoading: projectsLoading } = useGetProjects()
     const { mutate: deleteProject } = useDeleteProject()
     const { api } = useApi()
-    const { state, } = useGlobalStateContext()
+    const state = useGlobalState()
 
     const globalTheme = state?.settings.theme
 

packages/client/src/components/chat/chat-dialog.tsx

@@ -3,10 +3,11 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/u
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Checkbox } from "@/components/ui/checkbox"
-import { useGlobalStateContext } from "../global-state-context"
+
 import { ModelSelector } from "./components/model-selector"
 import { APIProviders } from "shared"
 import { useCreateChat } from "@/hooks/api/use-chat-ai-api"
+import { useGlobalStateHelpers } from "../use-global-state-helpers"
 
 type ChatDialogProps = {
     open: boolean
@@ -18,12 +19,11 @@ export function ChatDialog({ open, onOpenChange }: ChatDialogProps) {
     const [copyExisting, setCopyExisting] = useState(false)
     const [provider, setProvider] = useState<APIProviders>("openai")
     const [currentModel, setCurrentModel] = useState<string>("")
-    const { createChatTab } = useGlobalStateContext()
     const createChatMutation = useCreateChat();
     const {
         activeChatTabState,
         updateActiveChatTab,
-    } = useGlobalStateContext();
+    } = useGlobalStateHelpers();
 
     const truncateText = (text: string, maxLength = 24) => {
         return text.length > maxLength ? `${text.slice(0, maxLength - 3)}...` : text;

packages/client/src/components/chat/chat-header.tsx

@@ -6,18 +6,16 @@ import { Badge } from "@/components/ui/badge";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 import { toast } from "sonner";
 import { useChatControl } from "./hooks/use-chat-state";
-import { useGlobalStateContext } from "@/components/global-state-context";
 import { useNavigate } from "@tanstack/react-router"
 import { buildPromptContent } from "@/components/projects/utils/projects-utils";
 import { useGetProjectPrompts } from "@/hooks/api/use-prompts-api";
 import { ProjectFile } from "shared/schema";
 import { useGetProjectFiles } from "@/hooks/api/use-projects-api";
 import { useGetChats } from "@/hooks/api/use-chat-ai-api";
-import { Input } from "../ui/input";
 import { useChatModelControl } from "@/components/chat/hooks/use-chat-model-control";
 import { ModelSelector } from "./components/model-selector";
-import { Separator } from "@/components/ui/separator";
 import { useCopyClipboard } from "@/hooks/utility-hooks/use-copy-clipboard";
+import { useGlobalStateHelpers } from "../use-global-state-helpers";
 
 interface ChatHeaderProps {
     onForkChat: () => void;
@@ -51,7 +49,7 @@ export function ChatHeader({
         linkChatTabToProjectTab,
         setActiveProjectTab,
         unlinkChatTab,
-    } = useGlobalStateContext();
+    } = useGlobalStateHelpers();
 
     const {
         provider,

packages/client/src/components/chat/chat-messages.tsx

@@ -15,16 +15,17 @@ import {
     PopoverTrigger,
     PopoverContent,
 } from "@/components/ui/popover";
-import { useGlobalStateContext } from "../global-state-context";
+
 import { MarkdownRenderer } from "@/components/markdown-renderer";
 import { useCopyClipboard } from "@/hooks/utility-hooks/use-copy-clipboard";
+import { useGlobalStateHelpers } from "../use-global-state-helpers";
 
 export function ChatMessages({
     chatControl,
 }: {
     chatControl: ReturnType<typeof useChatControl>;
 }) {
-    const { state } = useGlobalStateContext();
+    const { state } = useGlobalStateHelpers();
     const settings = state?.settings;
     const isDarkMode = settings?.theme === "dark";
     const selectedTheme = isDarkMode

packages/client/src/components/chat/chat-project-sidebar.tsx

@@ -9,21 +9,21 @@ import { useGetProjectFiles } from '@/hooks/api/use-projects-api'
 import { buildPromptContent } from '@/components/projects/utils/projects-utils'
 import { ProjectFile } from 'shared/schema'
 import { toast } from 'sonner'
-import { useGlobalStateContext } from '@/components/global-state-context'
 import { useSelectedFiles } from '@/hooks/utility-hooks/use-selected-files'
 import { linkSettingsSchema, LinkSettings } from 'shared'
 import { Copy, Folder, FolderOpen, FolderOpenIcon } from 'lucide-react'
 import { SelectedFilesList } from '@/components/projects/selected-files-list'
 import { SlidingSidebar } from '@/components/sliding-sidebar'
 import { PromptsList } from '../projects/prompts-list'
 import { useCopyClipboard } from '@/hooks/utility-hooks/use-copy-clipboard'
+import { useGlobalStateHelpers } from '../use-global-state-helpers'
 
 type ChatProjectSidebarProps = {
     linkedProjectTabId: string
 }
 
 export function ChatProjectSidebar({ linkedProjectTabId }: ChatProjectSidebarProps) {
-    const { state, updateChatLinkSettings, unlinkChatTab, activeChatTabState } = useGlobalStateContext()
+    const { state, updateChatLinkSettings, unlinkChatTab, activeChatTabState } = useGlobalStateHelpers()
     const linkedProjectState = state?.projectTabs[linkedProjectTabId]
     const [tabValue, setTabValue] = useState('files')
 

packages/client/src/components/chat/chat-sidebar.tsx

@@ -10,9 +10,9 @@ import {
     useUpdateChat,
 } from '@/hooks/api/use-chat-ai-api';
 import { Chat } from 'shared/index';
-import { useGlobalStateContext } from '@/components/global-state-context';
 import { cn } from '@/lib/utils';
 import { SlidingSidebar } from '../sliding-sidebar';
+import { useGlobalStateHelpers } from '../use-global-state-helpers';
 
 type ChatSidebarProps = {
     // We no longer pass the modelControl here
@@ -22,7 +22,7 @@ export function ChatSidebar({ }: ChatSidebarProps) {
     const {
         activeChatTabState,
         updateActiveChatTab,
-    } = useGlobalStateContext();
+    } = useGlobalStateHelpers();
 
     const [newChatTitle, setNewChatTitle] = useState('');
     const [editingChatId, setEditingChatId] = useState<string | null>(null);

packages/client/src/components/chat/hooks/use-chat-model-control.tsx

@@ -1,11 +1,11 @@
+import { useGlobalStateHelpers } from "@/components/use-global-state-helpers";
 import { APIProviders } from "shared";
-import { useGlobalStateContext } from "@/components/global-state-context";
 
 export const useChatModelControl = () => {
     const {
         activeChatTabState,
         updateActiveChatTab,
-    } = useGlobalStateContext();
+    } = useGlobalStateHelpers();
 
     // Fall back to defaults if no tab is active
     const provider: APIProviders = activeChatTabState?.provider ?? 'openai';

packages/client/src/components/chat/hooks/use-chat-state.tsx

@@ -1,14 +1,14 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import {
     useCreateChat,
     useGetMessages,
     useSendMessage,
     useForkChat,
 } from '@/hooks/api/use-chat-ai-api';
-import { useGlobalStateContext } from '@/components/global-state-context';
 import { useChatModelControl } from './use-chat-model-control';
 import { ChatMessage } from 'shared/schema';
 import { APIProviders } from 'shared/index';
+import { useGlobalStateHelpers } from '@/components/use-global-state-helpers';
 
 type TempChatMessage = ChatMessage & { tempId?: string };
 
@@ -18,7 +18,7 @@ export function useChatControl() {
         updateActiveChatTab,
         wsReady,
         state
-    } = useGlobalStateContext();
+    } = useGlobalStateHelpers();
 
     // If you'd like to keep a local "pending" queue that hasn't yet been
     // committed to the global state, you can do so here:

packages/client/src/components/file-viewer-dialog.tsx

@@ -7,9 +7,9 @@ import { atomOneLight } from 'react-syntax-highlighter/dist/esm/styles/hljs'
 import { Textarea } from './ui/textarea'
 import { ProjectFile } from 'shared/schema'
 import { MarkdownRenderer } from './markdown-renderer'
-import { useGlobalSettings } from '@/components/global-state-context'
 import { useCopyClipboard } from '@/hooks/utility-hooks/use-copy-clipboard'
 import { Switch } from '@/components/ui/switch'
+import { useGlobalStateHelpers } from './use-global-state-helpers'
 
 type FileViewerDialogProps = {
     open: boolean
@@ -46,7 +46,9 @@ export function FileViewerDialog({
     const [isEditingFile, setIsEditingFile] = useState(false)
     const [editedContent, setEditedContent] = useState<string>('')
     const [showRawMarkdown, setShowRawMarkdown] = useState(false)
-    const { settings } = useGlobalSettings()
+    const { state } = useGlobalStateHelpers()
+    const settings = state.settings
+
     const isDarkMode = settings.theme === "dark"
     const selectedTheme = isDarkMode ? settings.codeThemeDark : settings.codeThemeLight
     const { copyToClipboard } = useCopyClipboard()