@nethru/kit 1.1.15 → 1.1.18

package/dist/components/chat/AiChat.js

@@ -5,19 +5,21 @@ import ChatMessages from './ChatMessages';
 import ChatInput from './input/ChatInput';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function AiChat({
-  mainPageRef,
+  pageRef,
+  pagePath,
   sx
 }) {
   const {
     messages,
     isLoading,
     chatContainerRef,
-    mainPageRef: _mainPageRef
+    pageRef: _pageRef,
+    setPagePath
   } = useChatContext();
   useEffect(() => {
-    if (!mainPageRef) return;
-    _mainPageRef.current = mainPageRef.current;
-  }, [mainPageRef?.current]);
+    if (pageRef) _pageRef.current = pageRef.current;
+    setPagePath(pagePath);
+  }, [pageRef?.current, pagePath]);
   return /*#__PURE__*/_jsxs(Stack, {
     sx: {
       ...styles.container,

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

@@ -20,8 +20,9 @@ export function ChatProvider({
   const [option, setOption] = useState();
   const options = useMemo(() => defaultOptions);
   const [tools, setTools] = useState([]);
+  const [pagePath, setPagePath] = useState();
   const chatContainerRef = useRef(null);
-  const mainPageRef = useRef(null);
+  const pageRef = useRef(null);
   useEffect(() => {
     loadModels();
     // loadTools();
@@ -78,11 +79,11 @@ export function ChatProvider({
     return await response.json();
   }
   async function analyzePage(message) {
-    if (!mainPageRef.current) throw new Error('No main page');
+    if (!pageRef.current) throw new Error('No main page');
     const {
       apiUrl
     } = getConfig();
-    const html = mainPageRef.current?.innerHTML;
+    const html = pageRef.current?.innerHTML;
     const response = await fetch(`${apiUrl}/api/pages/analyze`, {
       method: 'POST',
       headers: {
@@ -92,7 +93,7 @@ export function ChatProvider({
         conversationId: conversationId,
         message: message,
         htmlContent: html,
-        pageUrl: window.location.href,
+        pagePath: pagePath,
         provider: provider,
         model: model,
         forceRefresh: true
@@ -100,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);
@@ -139,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,
@@ -153,9 +160,12 @@ export function ChatProvider({
     option,
     setOption,
     tools,
+    pagePath,
+    setPagePath,
     chatContainerRef,
-    mainPageRef,
+    pageRef,
     sendMessage,
+    retrySend,
     clearChat,
     conversationId
   };

package/dist/components/chat/input/ModelSelect.js

@@ -1,6 +1,7 @@
 import React from "react";
 import { Box, Divider, MenuItem, Select } from "@mui/material";
 import { useChatContext } from "../contexts/ChatContext";
+import typography from "@nethru/ui/base/styles/typography";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 export default function ModelSelect({
   ...props
@@ -26,7 +27,10 @@ export default function ModelSelect({
       onChange: onChange,
       disableUnderline: true,
       sx: styles.select,
-      renderValue: value => findModel(providers, value)?.name,
+      renderValue: value => /*#__PURE__*/_jsx(Box, {
+        sx: styles.value,
+        children: findModel(providers, value)?.name
+      }),
       ...props,
       children: makeOptions(providers)
     })
@@ -41,10 +45,10 @@ function makeOptions(providers) {
         value: model.id,
         children: /*#__PURE__*/_jsxs(Box, {
           children: [/*#__PURE__*/_jsx(Box, {
-            sx: styles.name,
+            sx: styles.option.name,
             children: model.name
           }), /*#__PURE__*/_jsx(Box, {
-            sx: styles.desc,
+            sx: styles.option.desc,
             children: model.description
           })]
         })
@@ -72,12 +76,17 @@ const styles = {
     color: '#666',
     fontSize: '11px'
   },
-  name: {
-    fontWeight: 400,
-    fontSize: '12px'
+  value: {
+    fontFamily: typography.fontFamily
   },
-  desc: {
-    fontSize: '11px',
-    fontWeight: 200
+  option: {
+    name: {
+      fontWeight: 400,
+      fontSize: '12px'
+    },
+    desc: {
+      fontSize: '11px',
+      fontWeight: 200
+    }
   }
 };

package/package.json

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