Add chat history navigation functionality (mckaywrigley#1403)

* Add chat history navigation functionality

* Update chat history navigation keybindings

---------

Co-authored-by: Mckay Wrigley <[email protected]>

Author: superhappychris

app/[locale]/login/page.tsx

@@ -96,16 +96,23 @@ export default async function Login({
     const email = formData.get("email") as string
     const password = formData.get("password") as string
 
-    const emailDomainWhitelistPatternsString = await getEnvVarOrEdgeConfigValue("EMAIL_DOMAIN_WHITELIST")
-    const emailDomainWhitelist = emailDomainWhitelistPatternsString?.trim() ? emailDomainWhitelistPatternsString?.split(",") : [];
-    const emailWhitelistPatternsString = await getEnvVarOrEdgeConfigValue("EMAIL_WHITELIST")
-    const emailWhitelist = emailWhitelistPatternsString?.trim() ? emailWhitelistPatternsString?.split(",") : [];
+    const emailDomainWhitelistPatternsString = await getEnvVarOrEdgeConfigValue(
+      "EMAIL_DOMAIN_WHITELIST"
+    )
+    const emailDomainWhitelist = emailDomainWhitelistPatternsString?.trim()
+      ? emailDomainWhitelistPatternsString?.split(",")
+      : []
+    const emailWhitelistPatternsString =
+      await getEnvVarOrEdgeConfigValue("EMAIL_WHITELIST")
+    const emailWhitelist = emailWhitelistPatternsString?.trim()
+      ? emailWhitelistPatternsString?.split(",")
+      : []
 
     // If there are whitelist patterns, check if the email is allowed to sign up
-    if(emailDomainWhitelist.length > 0 || emailWhitelist.length > 0) {
+    if (emailDomainWhitelist.length > 0 || emailWhitelist.length > 0) {
       const domainMatch = emailDomainWhitelist?.includes(email.split("@")[1])
       const emailMatch = emailWhitelist?.includes(email)
-      if(!domainMatch && !emailMatch) {
+      if (!domainMatch && !emailMatch) {
         return redirect(
           `/login?message=Email ${email} is not allowed to sign up.`
         )

components/chat/chat-hooks/use-chat-history.tsx

@@ -0,0 +1,77 @@
+import { ChatbotUIContext } from "@/context/context"
+import { useContext, useEffect, useState } from "react"
+
+/**
+ * Custom hook for handling chat history in the chat component.
+ * It provides functions to set the new message content to the previous or next user message in the chat history.
+ *
+ * @returns An object containing the following functions:
+ *   - setNewMessageContentToPreviousUserMessage: Sets the new message content to the previous user message.
+ *   - setNewMessageContentToNextUserMessage: Sets the new message content to the next user message in the chat history.
+ */
+export const useChatHistoryHandler = () => {
+  const { setUserInput, chatMessages, isGenerating } =
+    useContext(ChatbotUIContext)
+  const userRoleString = "user"
+
+  const [messageHistoryIndex, setMessageHistoryIndex] = useState<number>(
+    chatMessages.length
+  )
+
+  useEffect(() => {
+    // If messages get deleted the history index pointed could be out of bounds
+    if (!isGenerating && messageHistoryIndex > chatMessages.length)
+      setMessageHistoryIndex(chatMessages.length)
+  }, [chatMessages, isGenerating, messageHistoryIndex])
+
+  /**
+   * Sets the new message content to the previous user message.
+   */
+  const setNewMessageContentToPreviousUserMessage = () => {
+    let tempIndex = messageHistoryIndex
+    while (
+      tempIndex > 0 &&
+      chatMessages[tempIndex - 1].message.role !== userRoleString
+    ) {
+      tempIndex--
+    }
+
+    const previousUserMessage =
+      chatMessages.length > 0 && tempIndex > 0
+        ? chatMessages[tempIndex - 1]
+        : null
+    if (previousUserMessage) {
+      setUserInput(previousUserMessage.message.content)
+      setMessageHistoryIndex(tempIndex - 1)
+    }
+  }
+
+  /**
+   * Sets the new message content to the next user message in the chat history.
+   * If there is a next user message, it updates the user input and message history index accordingly.
+   * If there is no next user message, it resets the user input and sets the message history index to the end of the chat history.
+   */
+  const setNewMessageContentToNextUserMessage = () => {
+    let tempIndex = messageHistoryIndex
+    while (
+      tempIndex < chatMessages.length - 1 &&
+      chatMessages[tempIndex + 1].message.role !== userRoleString
+    ) {
+      tempIndex++
+    }
+
+    const nextUserMessage =
+      chatMessages.length > 0 && tempIndex < chatMessages.length - 1
+        ? chatMessages[tempIndex + 1]
+        : null
+    setUserInput(nextUserMessage?.message.content || "")
+    setMessageHistoryIndex(
+      nextUserMessage ? tempIndex + 1 : chatMessages.length
+    )
+  }
+
+  return {
+    setNewMessageContentToPreviousUserMessage,
+    setNewMessageContentToNextUserMessage
+  }
+}

components/chat/chat-input.tsx

@@ -16,6 +16,7 @@ import { TextareaAutosize } from "../ui/textarea-autosize"
 import { ChatCommandInput } from "./chat-command-input"
 import { ChatFilesDisplay } from "./chat-files-display"
 import { useChatHandler } from "./chat-hooks/use-chat-handler"
+import { useChatHistoryHandler } from "./chat-hooks/use-chat-history"
 import { usePromptAndCommand } from "./chat-hooks/use-prompt-and-command"
 import { useSelectFileHandler } from "./chat-hooks/use-select-file-handler"
 
@@ -66,6 +67,11 @@ export const ChatInput: FC<ChatInputProps> = ({}) => {
 
   const { filesToAccept, handleSelectDeviceFile } = useSelectFileHandler()
 
+  const {
+    setNewMessageContentToNextUserMessage,
+    setNewMessageContentToPreviousUserMessage
+  } = useChatHistoryHandler()
+
   const fileInputRef = useRef<HTMLInputElement>(null)
 
   useEffect(() => {
@@ -81,34 +87,46 @@ export const ChatInput: FC<ChatInputProps> = ({}) => {
       handleSendMessage(userInput, chatMessages, false)
     }
 
+    // Consolidate conditions to avoid TypeScript error
     if (
-      isPromptPickerOpen &&
-      (event.key === "Tab" ||
-        event.key === "ArrowUp" ||
-        event.key === "ArrowDown")
+      isPromptPickerOpen ||
+      isFilePickerOpen ||
+      isToolPickerOpen ||
+      isAssistantPickerOpen
     ) {
+      if (
+        event.key === "Tab" ||
+        event.key === "ArrowUp" ||
+        event.key === "ArrowDown"
+      ) {
+        event.preventDefault()
+        // Toggle focus based on picker type
+        if (isPromptPickerOpen) setFocusPrompt(!focusPrompt)
+        if (isFilePickerOpen) setFocusFile(!focusFile)
+        if (isToolPickerOpen) setFocusTool(!focusTool)
+        if (isAssistantPickerOpen) setFocusAssistant(!focusAssistant)
+      }
+    }
+
+    if (event.key === "ArrowUp" && event.shiftKey && event.ctrlKey) {
       event.preventDefault()
-      setFocusPrompt(!focusPrompt)
+      setNewMessageContentToPreviousUserMessage()
     }
 
-    if (
-      isFilePickerOpen &&
-      (event.key === "Tab" ||
-        event.key === "ArrowUp" ||
-        event.key === "ArrowDown")
-    ) {
+    if (event.key === "ArrowDown" && event.shiftKey && event.ctrlKey) {
       event.preventDefault()
-      setFocusFile(!focusFile)
+      setNewMessageContentToNextUserMessage()
     }
 
-    if (
-      isToolPickerOpen &&
-      (event.key === "Tab" ||
-        event.key === "ArrowUp" ||
-        event.key === "ArrowDown")
-    ) {
+    //use shift+ctrl+up and shift+ctrl+down to navigate through chat history
+    if (event.key === "ArrowUp" && event.shiftKey && event.ctrlKey) {
+      event.preventDefault()
+      setNewMessageContentToPreviousUserMessage()
+    }
+
+    if (event.key === "ArrowDown" && event.shiftKey && event.ctrlKey) {
       event.preventDefault()
-      setFocusTool(!focusTool)
+      setNewMessageContentToNextUserMessage()
     }
 
     if (