refactor: update AgenticInterface and related tools to use useSquareStore

- Replace useChatStore with useSquareStore in AgenticInterface for square color management
- Simplify handler functions for square color tools
- Remove square color state management from useChatStore

src/components/AgenticInterface.tsx

@@ -1,5 +1,5 @@
 import { useChat } from "@/hooks/useChat";
-import { useChatStore } from "@/store/useChatStore";
+import { useSquareStore } from "@/store/useSquareStore";
 import {
   getSquareColorTool,
   handleGetSquareColor,
@@ -11,17 +11,16 @@ import { ColorControlForm } from "./ColorControlForm";
 import { ColorVisualizer } from "./ColorVisualizer";
 
 export function AgenticInterface() {
-  const { squareColor, setSquareColor } = useChatStore();
+  const { squareColor, setSquareColor } = useSquareStore();
 
   const { messages, sendMessage, isProcessing, loadingStatus } = useChat([
     {
       tool: setSquareColorTool,
-      handler: (args) => handleSetSquareColor(args, { setSquareColor }),
+      handler: handleSetSquareColor,
     },
     {
       tool: getSquareColorTool,
-      handler: () =>
-        handleGetSquareColor({ color: useChatStore.getState().squareColor }),
+      handler: handleGetSquareColor,
     },
   ]);
 

src/store/useChatStore.ts

@@ -1,9 +1,5 @@
 import { create } from "zustand";
-import type {
-  ChatMessage,
-  FunctionCallResult,
-  UIMessage,
-} from "@/types/chat";
+import type { ChatMessage, FunctionCallResult, UIMessage } from "@/types/chat";
 
 const INITIAL_MESSAGE: UIMessage = {
   id: 1,
@@ -12,11 +8,9 @@ const INITIAL_MESSAGE: UIMessage = {
 };
 
 interface ChatState {
-  // UI Messages (displayed in chat)
   messages: UIMessage[];
   addMessage: (message: UIMessage) => void;
 
-  // ML Conversation (for multi-turn function calling)
   conversationMessages: ChatMessage[];
   lastFunctionCall: FunctionCallResult;
   setConversation: (
@@ -24,27 +18,17 @@ interface ChatState {
     functionCall: FunctionCallResult,
   ) => void;
   clearConversation: () => void;
-
-  // App State
-  squareColor: string;
-  setSquareColor: (color: string) => void;
 }
 
 export const useChatStore = create<ChatState>((set) => ({
-  // UI Messages
   messages: [INITIAL_MESSAGE],
   addMessage: (message) =>
     set((state) => ({ messages: [...state.messages, message] })),
 
-  // ML Conversation
   conversationMessages: [],
   lastFunctionCall: null,
   setConversation: (conversationMessages, lastFunctionCall) =>
     set({ conversationMessages, lastFunctionCall }),
   clearConversation: () =>
     set({ conversationMessages: [], lastFunctionCall: null }),
-
-  // App State
-  squareColor: "rebeccapurple",
-  setSquareColor: (squareColor) => set({ squareColor }),
 }));

src/store/useSquareStore.ts

@@ -0,0 +1,13 @@
+import { create } from "zustand";
+
+type SquareState = {
+  squareColor: string;
+  setSquareColor: (color: string) => void;
+};
+
+export const useSquareStore = create<SquareState>((set) => ({
+  squareColor: "rebeccapurple",
+  setSquareColor: (squareColor) => set({ squareColor }),
+}));
+
+

src/tools/definitions/getSquareColor.ts

@@ -1,9 +1,6 @@
+import { useSquareStore } from "@/store/useSquareStore";
 import type { ToolDefinition } from "@/types/chat";
 
-type GetSquareColorContext = {
-  color: string;
-};
-
 export const getSquareColorTool: ToolDefinition = {
   type: "function",
   function: {
@@ -18,6 +15,6 @@ export const getSquareColorTool: ToolDefinition = {
   },
 };
 
-export function handleGetSquareColor(ctx: GetSquareColorContext) {
-  return { color: ctx.color };
+export function handleGetSquareColor() {
+  return { color: useSquareStore.getState().squareColor };
 }

src/tools/definitions/setSquareColor.ts

@@ -1,9 +1,6 @@
+import { useSquareStore } from "@/store/useSquareStore";
 import type { ToolDefinition } from "@/types/chat";
 
-type SetSquareColorContext = {
-  setSquareColor: (color: string) => void;
-};
-
 export const setSquareColorTool: ToolDefinition = {
   type: "function",
   function: {
@@ -22,12 +19,9 @@ export const setSquareColorTool: ToolDefinition = {
   },
 };
 
-export function handleSetSquareColor(
-  args: Record<string, unknown>,
-  ctx: SetSquareColorContext,
-) {
+export function handleSetSquareColor(args: Record<string, unknown>) {
   const { color } = args;
   if (typeof color !== "string" || !color) return { error: "Invalid args" };
-  ctx.setSquareColor(color);
+  useSquareStore.getState().setSquareColor(color);
   return { success: true, color };
 }