fix: ghost temp conversation #805 (#807)

Author: mikbry

webapp/components/views/Threads/ConversationContext.tsx renamed to webapp/components/views/Threads/Conversation/ConversationContext.tsx

@@ -40,7 +40,7 @@ import { preProcessingCommands } from '@/utils/commands';
 import useShortcuts, { ShortcutIds } from '@/hooks/useShortcuts';
 import { CommandManager } from '@/utils/commands/types';
 import { sendMessage, updateMessageContent } from '@/utils/messages';
-import { PromptContext } from './Prompt/PromptContext';
+import { PromptContext } from '../Prompt/PromptContext';
 
 type Context = {
   selectedMessageId: string | undefined;
@@ -226,7 +226,7 @@ function ConversationProvider({
       }
 
       if (clearPrompt) {
-        updatedConversations = clearPrompt(updatedConversation, updatedConversations);
+        updatedConversations = await clearPrompt(updatedConversation, updatedConversations);
       }
 
       logger.info(

webapp/components/views/Threads/Conversation/index.tsx

@@ -24,7 +24,7 @@ import { MenuAction, Page, ViewName } from '@/types/ui';
 import logger from '@/utils/logger';
 import ConversationList from './ConversationList';
 import PromptsGrid from './PromptsGrid';
-import { useConversationContext } from '../ConversationContext';
+import { useConversationContext } from './ConversationContext';
 import { usePromptContext } from '../Prompt/PromptContext';
 
 export type ConversationPanelProps = {

webapp/components/views/Threads/Prompt/PromptContext.tsx

@@ -59,9 +59,9 @@ type Context = {
   clearPrompt: (
     conversation: Conversation | undefined,
     newConversations: Conversation[],
-  ) => Conversation[];
-  handleChangePrompt: (prompt: ParsedPrompt) => void;
-  selectTemplate: (template: PromptTemplate) => void;
+  ) => Promise<Conversation[]>;
+  // handleChangePrompt: (prompt: ParsedPrompt) => void;
+  selectTemplate: (template: PromptTemplate) => Promise<void>;
   tokenValidator: TokenValidator;
   usage: Usage | undefined;
 };
@@ -162,7 +162,7 @@ function PromptProvider({
   ]);
 
   const clearPrompt = useCallback(
-    (conversation: Conversation | undefined, newConversations: Conversation[]) => {
+    async (conversation: Conversation | undefined, newConversations: Conversation[]) => {
       setChangedPrompt(undefined);
 
       let updatedConversations = newConversations;
@@ -171,18 +171,18 @@ function PromptProvider({
           { ...conversation, currentPrompt: undefined, temp: false },
           newConversations,
         );
-        updateConversations(updatedConversations);
+        await updateConversations(updatedConversations);
       }
       return updatedConversations;
     },
     [updateConversations],
   );
 
   const handleUpdatePrompt = useCallback(
-    (prompt: ParsedPrompt | undefined, conversationName = getDefaultConversationName(t)) => {
+    async (prompt: ParsedPrompt | undefined, conversationName = getDefaultConversationName(t)) => {
       if (prompt?.raw === '' && tempConversationId) {
         setChangedPrompt(undefined);
-        updateConversations(conversations.filter((c) => !c.temp));
+        await updateConversations(conversations.filter((c) => !c.temp));
         onUpdateTempConversation(undefined);
         return;
       }
@@ -191,12 +191,12 @@ function PromptProvider({
         setChangedPrompt(undefined);
         return;
       }
-      let updatedConversations: Conversation[];
+      let updatedConversations: Conversation[] | undefined;
       if (conversation) {
         conversation.currentPrompt = prompt;
         updatedConversations = conversations.filter((c) => !(c.temp && c.id !== conversationId));
         updatedConversations = updateConversation(conversation, updatedConversations, true);
-      } else {
+      } else if (prompt?.raw !== '') {
         updatedConversations = conversations.filter((c) => !c.temp);
         let newConversation = createConversation(conversationName);
         newConversation.temp = true;
@@ -211,8 +211,12 @@ function PromptProvider({
         }
         updatedConversations.push(newConversation);
         onUpdateTempConversation(newConversation.id);
+      } else {
+        updatedConversations = conversations.filter((c) => !c.temp);
+      }
+      if (updatedConversations) {
+        await updateConversations(updatedConversations);
       }
-      updateConversations(updatedConversations);
       setChangedPrompt(undefined);
     },
     [
@@ -230,17 +234,17 @@ function PromptProvider({
 
   useDebounceFunc<ParsedPrompt | undefined>(handleUpdatePrompt, changedPrompt, 500);
 
-  const handleChangePrompt = useCallback(
+  /* const handleChangePrompt = useCallback(
     (prompt: ParsedPrompt) => {
       if (prompt.raw !== conversationPrompt?.raw) {
         setChangedPrompt(prompt);
       }
     },
     [conversationPrompt],
-  );
+  ); */
 
   const selectTemplate = useCallback(
-    (template: PromptTemplate) => {
+    async (template: PromptTemplate) => {
       handleUpdatePrompt(parseAndValidatePrompt(template.value), template.name);
     },
     [handleUpdatePrompt, parseAndValidatePrompt],
@@ -253,7 +257,7 @@ function PromptProvider({
       parseAndValidatePrompt,
       changedPrompt,
       setChangedPrompt,
-      handleChangePrompt,
+      // handleChangePrompt,
       tokenValidator,
       selectTemplate,
       usage,
@@ -263,7 +267,7 @@ function PromptProvider({
       clearPrompt,
       parseAndValidatePrompt,
       changedPrompt,
-      handleChangePrompt,
+      // handleChangePrompt,
       tokenValidator,
       selectTemplate,
       usage,
@@ -278,12 +282,12 @@ const usePromptContext = (): Context => {
   if (!context) {
     return {
       conversationPrompt: EmptyParsedPrompt,
-      clearPrompt: () => [],
+      clearPrompt: async () => [],
       parseAndValidatePrompt: () => EmptyParsedPrompt,
       changedPrompt: undefined,
-      handleChangePrompt: () => {},
+      // handleChangePrompt: () => {},
       tokenValidator: () => [EmptyPromptToken, undefined],
-      selectTemplate: () => {},
+      selectTemplate: async () => {},
       setChangedPrompt: () => {},
       usage: undefined,
     };

webapp/components/views/Threads/Prompt/index.tsx

@@ -46,7 +46,7 @@ import { ShortcutBadge } from '../../../common/ShortCut';
 import PromptInput from './PromptInput';
 import PromptCommands from './PromptCommands';
 import { usePromptContext } from './PromptContext';
-import { useConversationContext } from '../ConversationContext';
+import { useConversationContext } from '../Conversation/ConversationContext';
 
 export type PromptProps = {
   conversationId: string;
@@ -149,7 +149,7 @@ export default function Prompt({
     const newPrompt = parsePrompt({ text: value, caretStartIndex }, tokenValidator);
     if (e.key === 'Enter' && e.shiftKey) {
       e.preventDefault();
-      setChangedPrompt?.(newPrompt);
+      setChangedPrompt(newPrompt);
     } else if (e.key === 'Enter' && !e.shiftKey) {
       e.preventDefault();
       sendMessage(newPrompt);
@@ -158,23 +158,19 @@ export default function Prompt({
 
   const handleValueChange = useCallback(
     (text: string, caretStartIndex: number) => {
-      if (!tokenValidator) return;
       const parsedPrompt = parsePrompt({ text, caretStartIndex }, tokenValidator);
-      if (prompt?.raw !== text && setChangedPrompt) {
-        // onUpdatePrompt(parsedPrompt);
+      if (prompt?.raw !== text) {
         setChangedPrompt(parsedPrompt);
       }
     },
-    [tokenValidator, prompt?.raw, setChangedPrompt],
+    [tokenValidator, prompt, setChangedPrompt],
   );
 
   const handleFocus = (event: ChangeEvent<HTMLTextAreaElement>) => {
     const lengthOfInput = event.target.value.length;
     event.currentTarget.setSelectionRange(lengthOfInput, lengthOfInput);
-    if (!tokenValidator) return;
     const newPrompt = parsePrompt({ textarea: event.target }, tokenValidator);
-    // onUpdatePrompt(newPrompt);
-    setChangedPrompt?.(newPrompt);
+    setChangedPrompt(newPrompt);
   };
 
   const shortcutSend: KeyBinding = defaultShortcuts.find(

webapp/components/views/Threads/Thread.tsx

@@ -53,7 +53,7 @@ import { getLocalProvider } from '@/utils/data/providers';
 import useShortcuts, { ShortcutIds } from '@/hooks/useShortcuts';
 import ThreadHeader from './Header';
 import { PromptProvider } from './Prompt/PromptContext';
-import { ConversationProvider } from './ConversationContext';
+import { ConversationProvider } from './Conversation/ConversationContext';
 import { ConversationPanel } from './Conversation';
 import Prompt from './Prompt';
 
@@ -119,11 +119,6 @@ function Thread({
     if (isMessageUpdating) {
       return;
     }
-    /* let notfocused = false;
-    if (!document.activeElement || document.activeElement.tagName === 'BODY') {
-      notfocused = true;
-    }
-    setNotFocused(notfocused); */
     logger.info('getNewMessages', conversationId, isMessageUpdating);
 
     setIsMessageUpdating(true);
@@ -243,7 +238,7 @@ function Thread({
       setTempConversationId(undefined);
     }
     if (!tempConversationId && !_conversationId) {
-      const temp = conversations.find((c) => c.temp);
+      const temp = conversations.find((c) => c.temp && c.currentPrompt);
       if (temp) {
         setTempConversationId(temp.id);
       }