fix: user input slow

src/components/chat-view/Chat.tsx

@@ -41,9 +41,9 @@ import { openSettingsModalWithError } from '../../utils/open-settings-modal'
 import { PromptGenerator } from '../../utils/prompt-generator'
 
 import AssistantMessageActions from './AssistantMessageActions'
-import ChatUserInput, { ChatUserInputRef } from './chat-input/ChatUserInput'
+import PromptInputWithActions, { ChatUserInputRef } from './chat-input/PromptInputWithActions'
 import { editorStateToPlainText } from './chat-input/utils/editor-state-to-plain-text'
-import { ChatListDropdown } from './ChatListDropdown'
+import { ChatHistory } from './ChatHistory'
 import QueryProgress, { QueryProgressState } from './QueryProgress'
 import ReactMarkdown from './ReactMarkdown'
 import ShortcutInfo from './ShortcutInfo'
@@ -557,7 +557,7 @@ const Chat = forwardRef<ChatRef, ChatProps>((props, ref) => {
 					>
 						<Plus size={18} />
 					</button>
-					<ChatListDropdown
+					<ChatHistory
 						chatList={chatList}
 						currentConversationId={currentConversationId}
 						onSelect={async (conversationId) => {
@@ -583,7 +583,7 @@ const Chat = forwardRef<ChatRef, ChatProps>((props, ref) => {
 						className="infio-chat-list-dropdown"
 					>
 						<History size={18} />
-					</ChatListDropdown>
+					</ChatHistory>
 				</div>
 			</div>
 			<div className="infio-chat-messages" ref={chatMessagesRef}>
@@ -604,21 +604,9 @@ const Chat = forwardRef<ChatRef, ChatProps>((props, ref) => {
 				{chatMessages.map((message, index) =>
 					message.role === 'user' ? (
 						<div key={message.id} className="infio-chat-messages-user">
-							<ChatUserInput
+							<PromptInputWithActions
 								ref={(ref) => registerChatUserInputRef(message.id, ref)}
 								initialSerializedEditorState={message.content}
-								onChange={(content) => {
-									setChatMessages((prevChatHistory) =>
-										prevChatHistory.map((msg) =>
-											msg.role === 'user' && msg.id === message.id
-												? {
-													...msg,
-													content,
-												}
-												: msg,
-										),
-									)
-								}}
 								onSubmit={(content, useVaultSearch) => {
 									if (editorStateToPlainText(content).trim() === '') return
 									handleSubmit(
@@ -674,16 +662,10 @@ const Chat = forwardRef<ChatRef, ChatProps>((props, ref) => {
 					</button>
 				)}
 			</div>
-			<ChatUserInput
+			<PromptInputWithActions
-				key={inputMessage.id} // this is needed to clear the editor when the user submits a new message
+				key={inputMessage.id}
 				ref={(ref) => registerChatUserInputRef(inputMessage.id, ref)}
 				initialSerializedEditorState={inputMessage.content}
-				onChange={(content) => {
-					setInputMessage((prevInputMessage) => ({
-						...prevInputMessage,
-						content,
-					}))
-				}}
 				onSubmit={(content, useVaultSearch) => {
 					if (editorStateToPlainText(content).trim() === '') return
 					handleSubmit(

src/components/chat-view/ChatHistory.tsx

@@ -106,7 +106,7 @@ function ChatListItem({
   )
 }
 
-export function ChatListDropdown({
+export function ChatHistory({
   chatList,
   currentConversationId,
   onSelect,

src/components/chat-view/chat-input/PromptInputWithActions.tsx

@@ -33,7 +33,6 @@ import { ModelSelect } from './ModelSelect'
 import { MentionNode } from './plugins/mention/MentionNode'
 import { NodeMutations } from './plugins/on-mutation/OnMutationPlugin'
 import { SubmitButton } from './SubmitButton'
-import { VaultChatButton } from './VaultChatButton'
 
 export type ChatUserInputRef = {
 	focus: () => void
@@ -41,7 +40,7 @@ export type ChatUserInputRef = {
 
 export type ChatUserInputProps = {
 	initialSerializedEditorState: SerializedEditorState | null
-	onChange: (content: SerializedEditorState) => void
+	onChange?: (content: SerializedEditorState) => void
 	onSubmit: (content: SerializedEditorState, useVaultSearch?: boolean) => void
 	onFocus: () => void
 	mentionables: Mentionable[]
@@ -50,7 +49,7 @@ export type ChatUserInputProps = {
 	addedBlockKey?: string | null
 }
 
-const ChatUserInput = forwardRef<ChatUserInputRef, ChatUserInputProps>(
+const PromptInputWithActions = forwardRef<ChatUserInputRef, ChatUserInputProps>(
 	(
 		{
 			initialSerializedEditorState,
@@ -279,11 +278,6 @@ const ChatUserInput = forwardRef<ChatUserInputRef, ChatUserInputProps>(
 					</div>
 					<div className="infio-chat-user-input-controls__buttons">
 						<SubmitButton onClick={() => handleSubmit()} />
-						{/* <VaultChatButton
-              onClick={() => {
-                handleSubmit({ useVaultSearch: true })
-              }}
-            /> */}
 					</div>
 				</div>
 			</div>
@@ -369,6 +363,6 @@ function MentionableContentPreview({
 	) : null
 }
 
-ChatUserInput.displayName = 'ChatUserInput'
+PromptInputWithActions.displayName = 'ChatUserInput'
 
-export default ChatUserInput
+export default PromptInputWithActions

src/components/chat-view/chat-input/VaultChatButton.tsx

@@ -1,42 +0,0 @@
-import * as Tooltip from '@radix-ui/react-tooltip'
-import {
-	ArrowBigUp,
-	ChevronUp,
-	Command,
-	CornerDownLeftIcon,
-} from 'lucide-react'
-import { Platform } from 'obsidian'
-
-export function VaultChatButton({ onClick }: { onClick: () => void }) {
-	return (
-		<>
-			<Tooltip.Provider delayDuration={0}>
-				<Tooltip.Root>
-					<Tooltip.Trigger asChild>
-						<button
-							className="infio-chat-user-input-vault-button"
-							onClick={onClick}
-						>
-							<div>vault</div>
-							<div className="infio-chat-user-input-vault-button-icons">
-								{Platform.isMacOS ? (
-									<Command size={10} />
-								) : (
-									<ChevronUp size={12} />
-								)}
-								{/* TODO: Replace with a custom icon */}
-								{/* <ArrowBigUp size={12} /> */}
-								<CornerDownLeftIcon size={12} />
-							</div>
-						</button>
-					</Tooltip.Trigger>
-					<Tooltip.Portal>
-						<Tooltip.Content className="infio-tooltip-content" sideOffset={5}>
-							Chat with your entire vault
-						</Tooltip.Content>
-					</Tooltip.Portal>
-				</Tooltip.Root>
-			</Tooltip.Provider>
-		</>
-	)
-}

src/components/chat-view/chat-input/plugins/template/TemplatePlugin.tsx

@@ -1,9 +1,9 @@
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
 import clsx from 'clsx'
 import {
-  $parseSerializedNode,
+	$parseSerializedNode,
-  COMMAND_PRIORITY_NORMAL,
+	COMMAND_PRIORITY_NORMAL,
-  TextNode,
+	TextNode,
 } from 'lexical'
 import { Trash2 } from 'lucide-react'
 import { useCallback, useEffect, useMemo, useState } from 'react'
@@ -13,8 +13,8 @@ import { useDatabase } from '../../../../../contexts/DatabaseContext'
 import { SelectTemplate } from '../../../../../database/schema'
 import { MenuOption } from '../shared/LexicalMenu'
 import {
-  LexicalTypeaheadMenuPlugin,
+	LexicalTypeaheadMenuPlugin,
-  useBasicTypeaheadTriggerMatch,
+	useBasicTypeaheadTriggerMatch,
 } from '../typeahead-menu/LexicalTypeaheadMenuPlugin'
 
 class TemplateTypeaheadOption extends MenuOption {