@stack-spot/ai-chat-widget 1.7.2 → 1.8.0

package/dist/app-metadata.json

@@ -1,7 +1,7 @@
 {
     "name": "@stack-spot/ai-chat-widget",
-    "version": "1.7.2",
-    "date": "Thu Feb 13 2025 20:56:26 GMT+0000 (Coordinated Universal Time)",
+    "version": "1.8.0",
+    "date": "Thu Mar 13 2025 11:59:45 GMT-0300 (Brasilia Standard Time)",
     "dependencies": [
         {
             "name": "@stack-spot/app-metadata",

package/dist/views/MessageInput/chat-entry-history.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Hook to manage keyboard shortcuts for the user's input history.
+ *
+ * This hook allows the user to navigate through the history of messages sent in a chat
+ * using the up arrow (`ArrowUp`) and down arrow (`ArrowDown`) keys.
+ */
+export declare const useUserEntryHistoryShortcut: () => {
+    handleKeyDown: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+    handleKeyUp: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+};
+//# sourceMappingURL=chat-entry-history.d.ts.map

package/dist/views/MessageInput/chat-entry-history.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-entry-history.d.ts","sourceRoot":"","sources":["../../../src/views/MessageInput/chat-entry-history.ts"],"names":[],"mappings":"AAwCA;;;;;GAKG;AACH,eAAO,MAAM,2BAA2B;2BAiCI,KAAK,CAAC,aAAa,CAAC,mBAAmB,CAAC;yBAU1C,KAAK,CAAC,aAAa,CAAC,mBAAmB,CAAC;CAOjF,CAAA"}

package/dist/views/MessageInput/chat-entry-history.js

@@ -0,0 +1,78 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { useCurrentChat } from '../../context/hooks.js';
+const DEFAULT_POINTER = -1;
+const useChatEntryHistory = () => {
+    const chat = useCurrentChat();
+    const historyPointer = useRef(DEFAULT_POINTER);
+    const messages = chat.getMessages();
+    useEffect(() => {
+        historyPointer.current = chat.getMessages().length;
+    }, [chat.id, messages]);
+    const navigateEntry = useCallback((startIndex, direction, inputValue) => {
+        const chatEntries = chat.getMessages() || [];
+        let pointer = startIndex + direction;
+        while (pointer > DEFAULT_POINTER && pointer < chatEntries.length && chatEntries[pointer]?.getValue().agentType !== 'user') {
+            pointer += direction;
+        }
+        if (pointer >= chatEntries.length) {
+            return inputValue;
+        }
+        if (pointer <= DEFAULT_POINTER) {
+            return chatEntries[0]?.getValue().content ?? inputValue;
+        }
+        historyPointer.current = pointer;
+        return chatEntries[pointer]?.getValue().content ?? inputValue;
+    }, [chat]);
+    const getPreviousUserEntry = useCallback((inputValue) => navigateEntry(historyPointer.current, -1, inputValue), [navigateEntry]);
+    const getNextUserEntry = useCallback((inputValue) => navigateEntry(historyPointer.current, +1, inputValue), [navigateEntry]);
+    return { getNextUserEntry, getPreviousUserEntry };
+};
+/**
+ * Hook to manage keyboard shortcuts for the user's input history.
+ *
+ * This hook allows the user to navigate through the history of messages sent in a chat
+ * using the up arrow (`ArrowUp`) and down arrow (`ArrowDown`) keys.
+ */
+export const useUserEntryHistoryShortcut = () => {
+    const { getNextUserEntry, getPreviousUserEntry } = useChatEntryHistory();
+    const chat = useCurrentChat();
+    const userEntryRef = useRef(chat.get('nextMessage') ?? '');
+    useEffect(() => {
+        userEntryRef.current = chat.get('nextMessage') ?? '';
+        chat.onChange('nextMessage', (value) => {
+            if (value === '') {
+                userEntryRef.current = '';
+            }
+        });
+    }, [chat.id]);
+    const setNextMessageFromHistory = useCallback((event, getEntryHistory) => {
+        const textarea = event.target;
+        if (textarea.selectionStart !== 0)
+            return;
+        const entryHistory = getEntryHistory(userEntryRef.current);
+        if (entryHistory === chat.get('nextMessage'))
+            return;
+        chat.set('nextMessage', entryHistory);
+        requestAnimationFrame(() => {
+            textarea.selectionStart = 0;
+            textarea.selectionEnd = 0;
+            event.preventDefault();
+            event.stopPropagation();
+        });
+    }, [chat]);
+    const handleKeyDown = useCallback((event) => {
+        if (event.key === 'ArrowUp') {
+            setNextMessageFromHistory(event, getPreviousUserEntry);
+        }
+        if (event.key === 'ArrowDown') {
+            setNextMessageFromHistory(event, getNextUserEntry);
+        }
+    }, [getPreviousUserEntry, getNextUserEntry, setNextMessageFromHistory]);
+    const handleKeyUp = useCallback((event) => {
+        if (!event.key.startsWith('Arrow')) {
+            userEntryRef.current = chat.get('nextMessage') ?? '';
+        }
+    }, [chat]);
+    return { handleKeyDown, handleKeyUp };
+};
+//# sourceMappingURL=chat-entry-history.js.map

package/dist/views/MessageInput/chat-entry-history.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-entry-history.js","sourceRoot":"","sources":["../../../src/views/MessageInput/chat-entry-history.ts"],"names":[],"mappings":"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"}

package/dist/views/MessageInput/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/views/MessageInput/index.tsx"],"names":[],"mappings":"AAgBA;;;;GAIG;AACH,eAAO,MAAM,YAAY,+CAsExB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/views/MessageInput/index.tsx"],"names":[],"mappings":"AAkBA;;;;GAIG;AACH,eAAO,MAAM,YAAY,+CA0ExB,CAAA"}

package/dist/views/MessageInput/index.js

@@ -12,6 +12,7 @@ import { ButtonAgent } from './ButtonAgent.js';
 import { ButtonGroup } from './ButtonGroup.js';
 import { useMessageInputDictionary } from './dictionary.js';
 import { InfoBar } from './InfoBar.js';
+import { useUserEntryHistoryShortcut } from './chat-entry-history.js';
 import { QuickCommandSelector } from './QuickCommandSelector.js';
 import { MAX_INPUT_HEIGHT, MessageInputBox, MIN_INPUT_HEIGHT } from './styled.js';
 /**
@@ -30,6 +31,7 @@ export const MessageInput = () => {
     const isMinimized = useWidgetState('isMinimized');
     const textAreaRef = useRef(null);
     const agentLabel = useCurrentChatState('agent')?.label ?? 'Stackspot AI';
+    const { handleKeyDown, handleKeyUp } = useUserEntryHistoryShortcut();
     const onSend = useCallback(async () => {
         const message = chat.get('nextMessage');
         if (!message)
@@ -46,12 +48,13 @@ export const MessageInput = () => {
             event.preventDefault();
             onSend();
         }
-    }, [onSend]);
+        handleKeyDown(event);
+    }, [onSend, handleKeyDown]);
     useEffect(() => {
         if (!isLoading)
             textAreaRef.current?.focus();
     }, [isLoading]);
-    return (_jsxs(MessageInputBox, { "aria-busy": isLoading, className: "message-input", children: [_jsx(ProgressBar, { visible: isLoading, shimmer: true }), _jsx(InfoBar, {}), _jsxs("div", { className: "wrapper-action", children: [_jsx(QuickCommandSelector, { inputRef: textAreaRef }), _jsx(AgentSelector, { inputRef: textAreaRef }), _jsxs("div", { className: listToClass(['action-box', focused && 'focused', isLoading && 'disabled']), children: [_jsx(ButtonAgent, {}), _jsx(AdaptiveTextArea, { ref: textAreaRef, disabled: isLoading, placeholder: interpolate(t.placeholder, agentLabel), onChange: e => chat.set('nextMessage', e.target.value), value: value, onFocus: () => setFocused(true), onBlur: () => setFocused(false), onKeyDown: onKeyDown, onIncreaseSize: () => setExpanded(false), onResetSize: () => !expansionLocked.current && setExpanded(true), maxHeight: isMinimized ? MIN_INPUT_HEIGHT : MAX_INPUT_HEIGHT }), _jsx(ButtonGroup, { onSend: onSend, onCancel: () => chat.abort(), expanded: expanded, isLoading: isLoading, setExpanded: (value) => {
+    return (_jsxs(MessageInputBox, { "aria-busy": isLoading, className: "message-input", children: [_jsx(ProgressBar, { visible: isLoading, shimmer: true }), _jsx(InfoBar, {}), _jsxs("div", { className: "wrapper-action", children: [_jsx(QuickCommandSelector, { inputRef: textAreaRef }), _jsx(AgentSelector, { inputRef: textAreaRef }), _jsxs("div", { className: listToClass(['action-box', focused && 'focused', isLoading && 'disabled']), children: [_jsx(ButtonAgent, {}), _jsx(AdaptiveTextArea, { ref: textAreaRef, disabled: isLoading, placeholder: interpolate(t.placeholder, agentLabel), onChange: e => chat.set('nextMessage', e.target.value), value: value, onFocus: () => setFocused(true), onBlur: () => setFocused(false), onKeyDown: onKeyDown, onKeyUp: handleKeyUp, onIncreaseSize: () => setExpanded(false), onResetSize: () => !expansionLocked.current && setExpanded(true), maxHeight: isMinimized ? MIN_INPUT_HEIGHT : MAX_INPUT_HEIGHT }), _jsx(ButtonGroup, { onSend: onSend, onCancel: () => chat.abort(), expanded: expanded, isLoading: isLoading, setExpanded: (value) => {
                                     setExpanded(value);
                                     expansionLocked.current = expanded;
                                 } })] })] })] }));

package/dist/views/MessageInput/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/views/MessageInput/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/views/MessageInput/index.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stack-spot/ai-chat-widget",
-  "version": "1.7.2",
+  "version": "1.8.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/app-metadata.json

@@ -1,7 +1,7 @@
 {
   "name": "@stack-spot/ai-chat-widget",
-  "version": "1.7.2",
-  "date": "Thu Feb 13 2025 20:56:26 GMT+0000 (Coordinated Universal Time)",
+  "version": "1.8.0",
+  "date": "Thu Mar 13 2025 11:59:45 GMT-0300 (Brasilia Standard Time)",
   "dependencies": [
     {
       "name": "@stack-spot/app-metadata",

package/src/views/MessageInput/chat-entry-history.ts

@@ -0,0 +1,97 @@
+import { useCallback, useEffect, useRef } from 'react'
+import { useCurrentChat } from '../../context/hooks'
+
+const DEFAULT_POINTER = -1
+
+const useChatEntryHistory = () => {
+  const chat = useCurrentChat()
+  const historyPointer = useRef(DEFAULT_POINTER)
+  const messages = chat.getMessages()
+
+  useEffect(() => {
+    historyPointer.current = chat.getMessages().length
+  }, [chat.id, messages])
+
+  const navigateEntry = useCallback((startIndex: number, direction: 1 | -1, inputValue: string) => {
+    const chatEntries = chat.getMessages() || []
+    let pointer = startIndex + direction
+
+    while (pointer > DEFAULT_POINTER && pointer < chatEntries.length && chatEntries[pointer]?.getValue().agentType !== 'user') {
+      pointer += direction
+    }
+
+    if (pointer >= chatEntries.length) {
+      return inputValue
+    }
+
+    if (pointer <= DEFAULT_POINTER) {
+      return chatEntries[0]?.getValue().content ?? inputValue
+    }
+
+    historyPointer.current = pointer
+    return chatEntries[pointer]?.getValue().content ?? inputValue
+  }, [chat])
+
+  const getPreviousUserEntry = useCallback((inputValue: string) => navigateEntry(historyPointer.current, -1, inputValue), [navigateEntry])
+  const getNextUserEntry = useCallback((inputValue: string) => navigateEntry(historyPointer.current, +1, inputValue), [navigateEntry])
+
+  return { getNextUserEntry, getPreviousUserEntry }
+}
+
+/**
+ * Hook to manage keyboard shortcuts for the user's input history.
+ *
+ * This hook allows the user to navigate through the history of messages sent in a chat
+ * using the up arrow (`ArrowUp`) and down arrow (`ArrowDown`) keys.
+ */
+export const useUserEntryHistoryShortcut = () => {
+  const { getNextUserEntry, getPreviousUserEntry } = useChatEntryHistory()
+  const chat = useCurrentChat()
+  const userEntryRef = useRef(chat.get('nextMessage') ?? '')
+
+  useEffect(() => {
+    userEntryRef.current = chat.get('nextMessage') ?? ''
+    chat.onChange('nextMessage', (value) => {
+      if (value === '') {
+        userEntryRef.current = ''
+      }
+    })
+  }, [chat.id])
+
+  const setNextMessageFromHistory = useCallback(
+    (event: React.KeyboardEvent<HTMLTextAreaElement>, getEntryHistory: typeof getNextUserEntry) => {
+      const textarea = event.target as HTMLTextAreaElement
+      if (textarea.selectionStart !== 0) return
+
+      const entryHistory = getEntryHistory(userEntryRef.current)
+      if (entryHistory === chat.get('nextMessage')) return
+
+      chat.set('nextMessage', entryHistory)
+
+      requestAnimationFrame(() => {
+        textarea.selectionStart = 0
+        textarea.selectionEnd = 0
+        event.preventDefault()
+        event.stopPropagation()
+      })
+
+    }, [chat])
+
+  const handleKeyDown = useCallback((event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (event.key === 'ArrowUp') {
+      setNextMessageFromHistory(event, getPreviousUserEntry)
+    }
+
+    if (event.key === 'ArrowDown') {
+      setNextMessageFromHistory(event, getNextUserEntry)
+    }
+  }, [getPreviousUserEntry, getNextUserEntry, setNextMessageFromHistory])
+
+  const handleKeyUp = useCallback((event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (!event.key.startsWith('Arrow')) {
+      userEntryRef.current = chat.get('nextMessage') ?? ''
+    }
+  }, [chat])
+
+  return { handleKeyDown, handleKeyUp }
+}

package/src/views/MessageInput/index.tsx

@@ -11,6 +11,8 @@ import { ButtonAgent } from './ButtonAgent'
 import { ButtonGroup } from './ButtonGroup'
 import { useMessageInputDictionary } from './dictionary'
 import { InfoBar } from './InfoBar'
+
+import { useUserEntryHistoryShortcut } from './chat-entry-history'
 import { QuickCommandSelector } from './QuickCommandSelector'
 import { MAX_INPUT_HEIGHT, MessageInputBox, MIN_INPUT_HEIGHT } from './styled'
 
@@ -30,6 +32,7 @@ export const MessageInput = () => {
   const isMinimized = useWidgetState('isMinimized')
   const textAreaRef = useRef<HTMLTextAreaElement>(null)
   const agentLabel = useCurrentChatState('agent')?.label ?? 'Stackspot AI'
+  const { handleKeyDown, handleKeyUp } = useUserEntryHistoryShortcut()
 
   const onSend = useCallback(async () => {
     const message = chat.get('nextMessage')
@@ -47,7 +50,9 @@ export const MessageInput = () => {
       event.preventDefault()
       onSend()
     }
-  }, [onSend])
+
+    handleKeyDown(event)
+  }, [onSend, handleKeyDown])
 
   useEffect(() => {
     if (!isLoading) textAreaRef.current?.focus()
@@ -71,6 +76,7 @@ export const MessageInput = () => {
             onFocus={() => setFocused(true)}
             onBlur={() => setFocused(false)}
             onKeyDown={onKeyDown}
+            onKeyUp={handleKeyUp}
             onIncreaseSize={() => setExpanded(false)}
             onResetSize={() => !expansionLocked.current && setExpanded(true)}
             maxHeight={isMinimized ? MIN_INPUT_HEIGHT : MAX_INPUT_HEIGHT}