[DEBUG]Tip of the day debug

src/app/middleware.ts

@@ -20,6 +20,7 @@ import { pingApi } from "../services/refact/ping";
 import { clearError, setError } from "../features/Errors/errorsSlice";
 import { updateConfig } from "../features/Config/configSlice";
 import { resetAttachedImagesSlice } from "../features/AttachedImages";
+import { nextTip } from "../features/TipOfTheDay";
 
 export const listenerMiddleware = createListenerMiddleware();
 const startListening = listenerMiddleware.startListening.withTypes<
@@ -126,3 +127,25 @@ startListening({
     }
   },
 });
+
+startListening({
+  matcher: isAnyOf(restoreChat, newChatAction, updateConfig),
+  effect: (action, listenerApi) => {
+    const state = listenerApi.getState();
+    const isUpdate = updateConfig.match(action);
+
+    const host =
+      isUpdate && action.payload.host ? action.payload.host : state.config.host;
+
+    const completeManual = isUpdate
+      ? action.payload.keyBindings?.completeManual
+      : state.config.keyBindings?.completeManual;
+
+    listenerApi.dispatch(
+      nextTip({
+        host,
+        completeManual,
+      }),
+    );
+  },
+});

src/app/store.ts

@@ -23,7 +23,7 @@ import {
 import { smallCloudApi } from "../services/smallcloud";
 import { reducer as fimReducer } from "../features/FIM/reducer";
 import { tourReducer } from "../features/Tour";
-import { tipOfTheDayReducer } from "../features/TipOfTheDay";
+import { tipOfTheDaySlice } from "../features/TipOfTheDay";
 import { reducer as configReducer } from "../features/Config/configSlice";
 import { activeFileReducer } from "../features/Chat/activeFile";
 import { selectedSnippetReducer } from "../features/Chat/selectedSnippet";
@@ -48,8 +48,8 @@ const tipOfTheDayPersistConfig = {
 };
 
 const persistedTipOfTheDayReducer = persistReducer<
-  ReturnType<typeof tipOfTheDayReducer>
->(tipOfTheDayPersistConfig, tipOfTheDayReducer);
+  ReturnType<typeof tipOfTheDaySlice.reducer>
+>(tipOfTheDayPersistConfig, tipOfTheDaySlice.reducer);
 
 // https://redux-toolkit.js.org/api/combineSlices
 // `combineSlices` automatically combines the reducers using
@@ -58,7 +58,8 @@ const rootReducer = combineSlices(
   {
     fim: fimReducer,
     tour: tourReducer,
-    tipOfTheDay: persistedTipOfTheDayReducer,
+    // tipOfTheDay: persistedTipOfTheDayReducer,
+    [tipOfTheDaySlice.reducerPath]: persistedTipOfTheDayReducer,
     config: configReducer,
     active_file: activeFileReducer,
     selected_snippet: selectedSnippetReducer,
@@ -104,9 +105,9 @@ export function setUpStore(preloadedState?: Partial<RootState>) {
   const store = configureStore({
     reducer: persistedReducer,
     preloadedState: initialState,
-    devTools: {
-      maxAge: 50,
-    },
+    // devTools: {
+    //   maxAge: 50,
+    // },
     middleware: (getDefaultMiddleware) => {
       const production = import.meta.env.MODE === "production";
       const middleware = production

src/components/Chat/Chat.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useRef, useEffect, useState } from "react";
 import { ChatForm, ChatFormProps } from "../ChatForm";
 import { ChatContent } from "../ChatContent";
 import { Flex, Button, Text, Container, Card } from "@radix-ui/themes";
 import {
@@ -7,6 +7,7 @@
   useAppDispatch,
   useSendChatRequest,
   useGetPromptsQuery,
+  useGetCapsQuery,
 } from "../../hooks";
 import type { Config } from "../../features/Config/configSlice";
 import {
@@ -34,23 +35,38 @@
   style?: React.CSSProperties;
   unCalledTools: boolean;
   // TODO: update this
-  caps: ChatFormProps["caps"];
-  maybeSendToSidebar: ChatFormProps["onClose"];
+  // caps: ChatFormProps["caps"];
+  // maybeSendToSidebar: ChatFormProps["onClose"];
 };
 
 export const Chat: React.FC<ChatProps> = ({
   style,
   unCalledTools,
-  caps,
-  maybeSendToSidebar,
+  // caps, // changes when clicking new chat :/
+  // maybeSendToSidebar,
 }) => {
+  useEffect(() => {
+    console.log("style changed");
+  }, [style]);
+  useEffect(() => {
+    console.log("uncalled tools change");
+  }, [unCalledTools]);
+
+  // useEffect(() => {
+  //   console.log("caps changed");
+  // }, [caps]);
+
+  // useEffect(() => {
+  //   console.log("side fn changed");
+  // }, [maybeSendToSidebar]);
+
   const [isViewingRawJSON, setIsViewingRawJSON] = useState(false);
   const chatContentRef = useRef<HTMLDivElement>(null);
   const isStreaming = useAppSelector(selectIsStreaming);
   const isWaiting = useAppSelector(selectIsWaiting);
 
   const chatId = useAppSelector(selectChatId);
   const { submit, abort, retryFromIndex, confirmToolUsage } =
     useSendChatRequest();
   const chatModel = useAppSelector(getSelectedChatModel);
   const chatToolUse = useAppSelector(getSelectedToolUse);
@@ -64,12 +80,15 @@
   const [isDebugChatHistoryVisible, setIsDebugChatHistoryVisible] =
     useState(false);
 
+  // TODO: can push this down,
+  const capsRequest = useGetCapsQuery();
   const onSetChatModel = useCallback(
     (value: string) => {
-      const model = caps.default_cap === value ? "" : value;
+      const defaultModel = capsRequest.data?.code_chat_default_model ?? "";
+      const model = defaultModel === value ? "" : value;
       dispatch(setChatModel(model));
     },
-    [caps.default_cap, dispatch],
+    [capsRequest.data?.code_chat_default_model, dispatch],
   );
   const preventSend = useAppSelector(selectPreventSend);
   const onEnableSend = () => dispatch(enableSend({ id: chatId }));
@@ -113,6 +132,16 @@
       focusTextarea();
     }
   }, [isWaiting, isStreaming, focusTextarea]);
+  console.log({ chatId });
+
+  // useEffect(() => {
+  //   console.log("retry changed");
+  // }, [retryFromIndex]);
+
+  useEffect(() => {
+    console.log("chat mounted");
+    return () => console.log("chat unmount");
+  }, []);
 
   return (
     <DropzoneProvider asChild>
@@ -128,7 +157,7 @@
         <ChatContent
           key={`chat-content-${chatId}`}
           ref={chatContentRef}
-          onRetry={retryFromIndex}
+          // onRetry={retryFromIndex}
         />
         {!isStreaming && preventSend && unCalledTools && (
           <Container py="4" bottom="0" style={{ justifyContent: "flex-end" }}>
@@ -148,9 +177,15 @@
           onSubmit={handleSummit}
           model={chatModel}
           onSetChatModel={onSetChatModel}
-          caps={caps}
+          // caps={caps}
+          caps={{
+            error: capsRequest.error ? "error fetching caps" : null,
+            fetching: capsRequest.isFetching,
+            default_cap: capsRequest.data?.code_chat_default_model ?? "",
+            available_caps: capsRequest.data?.code_chat_models ?? {},
+          }}
           onStopStreaming={abort}
-          onClose={maybeSendToSidebar}
+          // onClose={maybeSendToSidebar}
           onTextAreaHeightChange={onTextAreaHeightChange}
           prompts={promptsRequest.data ?? {}}
           onSetSystemPrompt={onSetSelectedSystemPrompt}
@@ -162,7 +197,11 @@
           {messages.length > 0 && (
             <Flex align="center" justify="between" width="100%">
               <Flex align="center" gap="1">
-                <Text size="1">model: {chatModel || caps.default_cap} </Text> •{" "}
+                <Text size="1">
+                  model:{" "}
+                  {chatModel || capsRequest.data?.code_chat_default_model}{" "}
+                </Text>{" "}
+                •{" "}
                 <Text
                   size="1"
                   onClick={() => setIsDebugChatHistoryVisible((prev) => !prev)}

src/components/ChatContent/ChatContent.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from "react";
+import React, { useCallback } from "react";
 import {
   ChatMessages,
   isChatContextFileMessage,
@@ -15,10 +15,8 @@ import { ContextFiles } from "./ContextFiles";
 import { AssistantInput } from "./AssistantInput";
 import { useAutoScroll } from "./useAutoScroll";
 import { PlainText } from "./PlainText";
-import { useConfig, useEventsBusForIDE } from "../../hooks";
-import { useAppSelector, useAppDispatch } from "../../hooks";
-import { RootState } from "../../app/store";
-import { next } from "../../features/TipOfTheDay";
+import { useConfig, useEventsBusForIDE, useSendChatRequest } from "../../hooks";
+import { useAppSelector } from "../../hooks";
 import {
   selectIsStreaming,
   selectIsWaiting,
@@ -27,25 +25,18 @@ import {
 import { takeWhile } from "../../utils";
 import { GroupedDiffs } from "./DiffContent";
 import { ScrollToBottomButton } from "./ScrollToBottomButton";
+import { currentTipOfTheDay } from "../../features/TipOfTheDay";
 
-export const TipOfTheDay: React.FC = () => {
-  const dispatch = useAppDispatch();
-  const config = useConfig();
-  const state = useAppSelector((state: RootState) => state.tipOfTheDay);
-
-  // TODO: find out what this is about.
-  useEffect(() => {
-    dispatch(next(config));
-  }, [dispatch, config]);
+const TipOfTheDay: React.FC = () => {
+  const tip = useAppSelector(currentTipOfTheDay);
 
   return (
     <Text>
-      💡 <b>Tip of the day</b>: {state.tip}
+      💡 <b>Tip of the day</b>: {tip}
     </Text>
   );
 };
 
-// TODO: turn this into a component
 const PlaceHolderText: React.FC = () => {
   const config = useConfig();
   const hasVecDB = config.features?.vecdb ?? false;
@@ -110,60 +101,55 @@ const PlaceHolderText: React.FC = () => {
   );
 };
 
-export type ChatContentProps = {
-  onRetry: (index: number, question: UserMessage["content"]) => void;
-};
-
-export const ChatContent = React.forwardRef<HTMLDivElement, ChatContentProps>(
-  (props, ref) => {
-    const messages = useAppSelector(selectMessages);
-    const isStreaming = useAppSelector(selectIsStreaming);
-    const isWaiting = useAppSelector(selectIsWaiting);
-
-    const {
-      innerRef,
-      handleScroll,
-      handleWheel,
-      handleScrollButtonClick,
-      isScrolledTillBottom,
-    } = useAutoScroll({
-      ref,
-      messages,
-      isStreaming,
-    });
-
-    const onRetryWrapper = (
-      index: number,
-      question: UserMessage["content"],
-    ) => {
-      props.onRetry(index, question);
+export const ChatContent = React.forwardRef<HTMLDivElement>((_props, ref) => {
+  const messages = useAppSelector(selectMessages);
+  const isStreaming = useAppSelector(selectIsStreaming);
+  const isWaiting = useAppSelector(selectIsWaiting);
+  const { retryFromIndex } = useSendChatRequest();
+
+  const {
+    innerRef,
+    handleScroll,
+    handleWheel,
+    handleScrollButtonClick,
+    isScrolledTillBottom,
+  } = useAutoScroll({
+    ref,
+    messages,
+    isStreaming,
+  });
+
+  const onRetryWrapper = useCallback(
+    (index: number, question: UserMessage["content"]) => {
+      retryFromIndex(index, question);
       handleScrollButtonClick();
-    };
+    },
+    [handleScrollButtonClick, retryFromIndex],
+  );
 
-    return (
-      <ScrollArea
-        style={{ flexGrow: 1, height: "auto", position: "relative" }}
-        scrollbars="vertical"
-        onScroll={handleScroll}
-        onWheel={handleWheel}
-      >
-        <Flex direction="column" className={styles.content} p="2" gap="1">
-          {messages.length === 0 && <PlaceHolderText />}
-          {renderMessages(messages, onRetryWrapper)}
-          {isWaiting && (
-            <Container py="4">
-              <Spinner />
-            </Container>
-          )}
-          <div ref={innerRef} />
-        </Flex>
-        {!isScrolledTillBottom && (
-          <ScrollToBottomButton onClick={handleScrollButtonClick} />
+  return (
+    <ScrollArea
+      style={{ flexGrow: 1, height: "auto", position: "relative" }}
+      scrollbars="vertical"
+      onScroll={handleScroll}
+      onWheel={handleWheel}
+    >
+      <Flex direction="column" className={styles.content} p="2" gap="1">
+        {messages.length === 0 && <PlaceHolderText />}
+        {renderMessages(messages, onRetryWrapper)}
+        {isWaiting && (
+          <Container py="4">
+            <Spinner />
+          </Container>
         )}
-      </ScrollArea>
-    );
-  },
-);
+        <div ref={innerRef} />
+      </Flex>
+      {!isScrolledTillBottom && (
+        <ScrollToBottomButton onClick={handleScrollButtonClick} />
+      )}
+    </ScrollArea>
+  );
+});
 
 ChatContent.displayName = "ChatContent";
 

src/components/ChatForm/ChatForm.tsx

@@ -297,6 +297,7 @@ export const ChatForm: React.FC<ChatFormProps> = ({
         checkboxes={checkboxes}
         showControls={showControls}
         onCheckedChange={onToggleCheckbox}
+        // can be moved down ?
         selectProps={{
           value: model || caps.default_cap,
           onChange: onSetChatModel,

src/features/App.tsx

@@ -132,9 +132,9 @@ export const InnerApp: React.FC<AppProps> = ({ style }: AppProps) => {
     dispatch(push({ name: "history" }));
   };
 
-  const goBack = () => {
+  const goBack = useCallback(() => {
     dispatch(pop());
-  };
+  }, [dispatch]);
 
   const page = pages[pages.length - 1];
 
@@ -191,6 +191,7 @@ export const InnerApp: React.FC<AppProps> = ({ style }: AppProps) => {
         )}
         {page.name === "chat" && (
           <Chat
+            // Can be pushed down
             host={config.host}
             tabbed={config.tabbed}
             backFromChat={goBack}