@nethru/kit 1.1.17 → 1.1.18

package/dist/components/chat/ChatMessage.js

@@ -1,8 +1,9 @@
 import React, { useMemo } from 'react';
-import { Box, keyframes } from '@mui/material';
+import { Box, IconButton, keyframes, Stack, Tooltip } from '@mui/material';
 import MarkdownContent from "./content/MarkdownContent";
 import ToolContent from "./content/ToolContent";
 import { ToolContextProvider } from "./contexts/ToolContext";
+import ReplayRoundedIcon from "@mui/icons-material/ReplayRounded";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const slideIn = keyframes`
     from {
@@ -15,20 +16,43 @@ const slideIn = keyframes`
     }
 `;
 const ChatMessage = ({
-  message
+  message,
+  retryable,
+  onRetry
 }) => {
   const textContent = useMemo(() => message.content.filter(c => c.type === 'text'), [message]);
-  return /*#__PURE__*/_jsxs(Box, {
-    sx: message.role === 'user' ? styles.messageUser : styles.messageAssistant,
-    children: [/*#__PURE__*/_jsx(ToolContextProvider, {
-      message: message,
-      children: /*#__PURE__*/_jsx(ToolContent, {})
-    }), textContent.map((item, index) => /*#__PURE__*/_jsx(Box, {
-      sx: styles.contentItem,
-      children: /*#__PURE__*/_jsx(MarkdownContent, {
-        content: item.value
+  return /*#__PURE__*/_jsxs(Stack, {
+    gap: 0.5,
+    sx: {
+      ...styles.options.base,
+      ...(retryable && styles.options.hover)
+    },
+    children: [/*#__PURE__*/_jsxs(Box, {
+      sx: message.role === 'user' ? styles.messageUser : styles.messageAssistant,
+      children: [/*#__PURE__*/_jsx(ToolContextProvider, {
+        message: message,
+        children: /*#__PURE__*/_jsx(ToolContent, {})
+      }), textContent.map((item, index) => /*#__PURE__*/_jsx(Box, {
+        sx: styles.contentItem,
+        children: /*#__PURE__*/_jsx(MarkdownContent, {
+          content: item.value
+        })
+      }, index))]
+    }), /*#__PURE__*/_jsx(Stack, {
+      className: "chat-options",
+      direction: "row",
+      justifyContent: "flex-end",
+      children: /*#__PURE__*/_jsx(Tooltip, {
+        title: "\uC7AC\uC2DC\uB3C4",
+        children: /*#__PURE__*/_jsx(IconButton, {
+          onClick: onRetry,
+          size: "small",
+          children: /*#__PURE__*/_jsx(ReplayRoundedIcon, {
+            fontSize: "small"
+          })
+        })
       })
-    }, index))]
+    })]
   });
 };
 export default ChatMessage;
@@ -72,5 +96,20 @@ const styles = {
     '&:last-child': {
       marginBottom: 0
     }
+  },
+  options: {
+    base: {
+      '& .chat-options': {
+        opacity: 0,
+        pointerEvents: 'none',
+        transition: 'opacity 0.15s ease'
+      }
+    },
+    hover: {
+      '&:hover .chat-options': {
+        opacity: 1,
+        pointerEvents: 'auto'
+      }
+    }
   }
 };

package/dist/components/chat/ChatMessages.js

@@ -1,22 +1,29 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import ChatMessage from './ChatMessage';
 import LoadingIndicator from './LoadingIndicator';
+import { useChatContext } from "./contexts/ChatContext";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ChatMessages = ({
   messages,
   isLoading,
   chatContainerRef
 }) => {
+  const {
+    retrySend
+  } = useChatContext();
   useEffect(() => {
     if (messages.length === 0) return;
     const message = messages[messages.length - 1];
     //if(message.role === 'assistant') console.log(message);
   }, [messages.length]);
+  const lastUserIdx = useMemo(() => messages.findLastIndex(m => m.role === 'user'), [messages.length]);
   return /*#__PURE__*/_jsxs("div", {
     style: styles.container,
     ref: chatContainerRef,
     children: [messages.map((message, index) => /*#__PURE__*/_jsx(ChatMessage, {
-      message: message
+      message: message,
+      retryable: !isLoading && index === lastUserIdx,
+      onRetry: _ => retrySend(message.content[0].value)
     }, index)), isLoading && /*#__PURE__*/_jsx(LoadingIndicator, {})]
   });
 };
@@ -28,7 +35,6 @@ const styles = {
     padding: '10px',
     display: 'flex',
     flexDirection: 'column',
-    gap: '1rem',
     background: '#fcfcfd'
   }
 };

package/dist/components/chat/contexts/ChatContext.js

@@ -101,18 +101,20 @@ export function ChatProvider({
     });
     return await response.json();
   }
-  const sendMessage = async () => {
-    const message = inputValue.trim();
+  const sendMessage = async (messageToSend = null) => {
+    const message = messageToSend ?? inputValue.trim();
     if (!message) return;
-    const userMessage = {
-      role: 'user',
-      content: [{
-        type: 'text',
-        value: message
-      }]
-    };
-    setMessages(prev => [...prev, userMessage]);
-    setInputValue('');
+    if (!messageToSend) {
+      const userMessage = {
+        role: 'user',
+        content: [{
+          type: 'text',
+          value: message
+        }]
+      };
+      setMessages(prev => [...prev, userMessage]);
+      setInputValue('');
+    }
     setIsLoading(true);
     try {
       let data = option === 'ANALYZE' ? await analyzePage(message) : await answer(message);
@@ -140,6 +142,10 @@ export function ChatProvider({
     setConversationId(null);
     setInputValue('');
   };
+  const retrySend = async retryMessage => {
+    setMessages(prev => prev.at(-1)?.role === 'assistant' ? prev.slice(0, -1) : prev);
+    await sendMessage(retryMessage);
+  };
   const value = {
     messages,
     inputValue,
@@ -159,6 +165,7 @@ export function ChatProvider({
     chatContainerRef,
     pageRef,
     sendMessage,
+    retrySend,
     clearChat,
     conversationId
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nethru/kit",
-  "version": "1.1.17",
+  "version": "1.1.18",
   "description": "A React component library by Nethru",
   "main": "dist/index.js",
   "homepage": ".",