feat: Edit AI Messages, Edit Messages in Place (#825)

* refactor: replace lodash import with specific function import

fix(api): esm imports to cjs

* refactor(Messages.tsx): convert to TS, out-source scrollToDiv logic to a custom hook
fix(ScreenshotContext.tsx): change Ref to RefObject in ScreenshotContextType
feat(useScrollToRef.ts): add useScrollToRef hook for scrolling to a ref with throttle
fix(Chat.tsx): update import path for Messages component
fix(Search.tsx): update import path for Messages component

* chore(types.ts): add TAskProps and TOptions types
refactor(useMessageHandler.ts): use TAskFunction type for ask function signature

* refactor(Message/Content): convert to TS, move Plugin component to Content dir

* feat(MessageContent.tsx): add MessageContent component for displaying and editing message content
feat(index.ts): export MessageContent component from Messages/Content directory

* wip(Message.jsx): conversion and use of new component in progress

* refactor: convert Message.jsx to TS and fix typing/imports based on changes

* refactor: add typed props and refactor MultiMessage to TS, fix typing issues resulting from the conversion

* edit message in progress

* feat: complete edit AI message logic, refactor continue logic

* feat(middleware): add validateMessageReq middleware
feat(routes): add validation for message requests using validateMessageReq middleware
feat(routes): add create, read, update, and delete routes for messages

* feat: complete frontend logic for editing messages in place
feat(messages.js): update route for updating a specific message
- Change the route for updating a message to include the messageId in the URL
- Update the request handler to use the messageId from the request parameters and the text from the request body
- Call the updateMessage function with the updated parameters

feat(MessageContent.tsx): add functionality to update a message
- Import the useUpdateMessageMutation hook from the data provider
- Destructure the conversationId, parentMessageId, and messageId from the message object
- Create a mutation function using the useUpdateMessageMutation hook
- Implement the updateMessage function to call the mutation function with the updated message parameters
- Update the messages state to reflect the updated message text

feat(api-endpoints.ts): update messages endpoint to include messageId
- Update the messages endpoint to include the messageId as an optional parameter

feat(data-service.ts): add updateMessage function
- Implement the updateMessage function to make a PUT request to

* fix(messages.js): make updateMessage function asynchronous and await its execution

* style(EditIcon): make icon active for AI message

* feat(gptPlugins/anthropic): add edit support

* fix(validateMessageReq.js): handle case when conversationId is 'new' and return empty array
feat(Message.tsx): pass message prop to SiblingSwitch component
refactor(SiblingSwitch.tsx): convert to TS

* fix(useMessageHandler.ts): remove message from currentMessages if isContinued is true
feat(useMessageHandler.ts): add support for submission messages in setMessages
fix(useServerStream.ts): remove unnecessary conditional in setMessages
fix(useServerStream.ts): remove isContinued variable from submission

* fix(continue): switch to continued message generation when continuing an earlier branch in conversation

* fix(abortMiddleware.js): fix condition to check partialText length
chore(abortMiddleware.js): add error logging when abortMessage fails

* refactor(MessageHeader.tsx): convert to TS
fix(Plugin.tsx): add default value for className prop in Plugin component

* refactor(MultiMessage.tsx): remove commented out code
docs(MultiMessage.tsx): update comment to clarify when siblingIdx is reset

* fix(GenerationButtons): optimistic state for continue button

* fix(MessageContent.tsx): add data-testid attribute to message text editor
fix(messages.spec.ts): update waitForServerStream function to include edit endpoint check
feat(messages.spec.ts): add test case for editing messages

* fix(HoverButtons & Message & useGenerations): Refactor edit functionality and related conditions

- Update enterEdit function signature and prop
- Create and utilize hideEditButton variable
- Enhance conditions for edit button visibility and active state
- Update button event handlers
- Introduce isEditableEndpoint in useGenerations and refine continueSupported condition.

* fix(useGenerations.ts): fix condition for hideEditButton to include error and searchResult
chore(data-provider): bump version to 0.1.6
fix(types.ts): add status property to TError type

* chore: bump @dqbd/tiktoken to 1.0.7

* fix(abortMiddleware.js): add required isCreatedByUser property to the error response object

* refactor(Message.tsx): remove unnecessary props from SiblingSwitch component, as setLatestMessage is firing on every switch already
refactor(SiblingSwitch.tsx): remove unused imports and code

* chore(BaseClient.js): move console.debug statements back inside if block

client/src/components/Messages/Messages.tsx

@@ -0,0 +1,126 @@
+import { useEffect, useState, useRef } from 'react';
+import { CSSTransition } from 'react-transition-group';
+import { useRecoilValue } from 'recoil';
+
+import ScrollToBottom from './ScrollToBottom';
+import MessageHeader from './MessageHeader';
+import MultiMessage from './MultiMessage';
+import { Spinner } from '~/components';
+import { useScreenshot, useScrollToRef } from '~/hooks';
+
+import store from '~/store';
+
+export default function Messages({ isSearchView = false }) {
+  const [currentEditId, setCurrentEditId] = useState<number | string | null>(-1);
+  const [showScrollButton, setShowScrollButton] = useState(false);
+  const scrollableRef = useRef<HTMLDivElement | null>(null);
+  const messagesEndRef = useRef<HTMLDivElement | null>(null);
+
+  const messagesTree = useRecoilValue(store.messagesTree);
+  const showPopover = useRecoilValue(store.showPopover);
+  const searchResultMessagesTree = useRecoilValue(store.searchResultMessagesTree);
+
+  const _messagesTree = isSearchView ? searchResultMessagesTree : messagesTree;
+
+  const conversation = useRecoilValue(store.conversation);
+  const { conversationId } = conversation ?? {};
+
+  const { screenshotTargetRef } = useScreenshot();
+
+  const handleScroll = () => {
+    if (!scrollableRef.current) {
+      return;
+    }
+    const { scrollTop, scrollHeight, clientHeight } = scrollableRef.current;
+    const diff = Math.abs(scrollHeight - scrollTop);
+    const percent = Math.abs(clientHeight - diff) / clientHeight;
+    if (percent <= 0.2) {
+      setShowScrollButton(false);
+    } else {
+      setShowScrollButton(true);
+    }
+  };
+
+  useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      if (!scrollableRef.current) {
+        return;
+      }
+      const { scrollTop, scrollHeight, clientHeight } = scrollableRef.current;
+      const diff = Math.abs(scrollHeight - scrollTop);
+      const percent = Math.abs(clientHeight - diff) / clientHeight;
+      const hasScrollbar = scrollHeight > clientHeight && percent > 0.2;
+      setShowScrollButton(hasScrollbar);
+    }, 650);
+
+    // Add a listener on the window object
+    window.addEventListener('scroll', handleScroll);
+
+    return () => {
+      clearTimeout(timeoutId);
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, [_messagesTree]);
+
+  let timeoutId: ReturnType<typeof setTimeout> | undefined;
+  const debouncedHandleScroll = () => {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(handleScroll, 100);
+  };
+
+  const { scrollToRef: scrollToBottom, handleSmoothToRef } = useScrollToRef(messagesEndRef, () =>
+    setShowScrollButton(false),
+  );
+
+  return (
+    <div
+      className="flex-1 overflow-y-auto pt-0"
+      ref={scrollableRef}
+      onScroll={debouncedHandleScroll}
+    >
+      <div className="dark:gpt-dark-gray mb-32 h-auto md:mb-48" ref={screenshotTargetRef}>
+        <div className="dark:gpt-dark-gray flex h-auto flex-col items-center text-sm">
+          <MessageHeader isSearchView={isSearchView} />
+          {_messagesTree === null ? (
+            <div className="flex h-screen items-center justify-center">
+              <Spinner />
+            </div>
+          ) : _messagesTree?.length == 0 && isSearchView ? (
+            <div className="flex w-full items-center justify-center gap-1 bg-gray-50 p-3 text-sm text-gray-500 dark:border-gray-900/50 dark:bg-gray-800 dark:text-gray-300">
+              Nothing found
+            </div>
+          ) : (
+            <>
+              <MultiMessage
+                key={conversationId} // avoid internal state mixture
+                messageId={conversationId ?? null}
+                conversation={conversation}
+                messagesTree={_messagesTree}
+                scrollToBottom={scrollToBottom}
+                currentEditId={currentEditId ?? null}
+                setCurrentEditId={setCurrentEditId}
+                isSearchView={isSearchView}
+              />
+              <CSSTransition
+                in={showScrollButton}
+                timeout={400}
+                classNames="scroll-down"
+                unmountOnExit={false}
+                // appear
+              >
+                {() =>
+                  showScrollButton &&
+                  !showPopover && <ScrollToBottom scrollHandler={handleSmoothToRef} />
+                }
+              </CSSTransition>
+            </>
+          )}
+          <div
+            className="dark:gpt-dark-gray group h-0 w-full flex-shrink-0 dark:border-gray-900/50"
+            ref={messagesEndRef}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}