@nethru/kit 1.1.13 → 1.1.14

package/dist/components/chat/AiChat.js

@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import { Stack } from "@mui/material";
 import { useChatContext } from './contexts/ChatContext';
 import ChatMessages from './ChatMessages';
-import ChatInput from './ChatInput';
+import ChatInput from './input/ChatInput';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function AiChat({
   mainPageRef,

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

@@ -1,6 +1,7 @@
-import React, { createContext, useContext, useEffect, useRef, useState } from 'react';
+import React, { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { getConfig } from "../../../js/config";
-import { isPageAnalysisIntent } from "../../../js/promptIntent";
+import AutoStoriesIcon from "@mui/icons-material/AutoStories";
+import WysiwygIcon from "@mui/icons-material/Wysiwyg";
 import { jsx as _jsx } from "react/jsx-runtime";
 const ChatContext = /*#__PURE__*/createContext();
 export function ChatProvider({
@@ -16,6 +17,8 @@ export function ChatProvider({
   const [provider, setProvider] = useState(defaultProvider);
   const [providers, setProviders] = useState([]);
   const [model, setModel] = useState(defaultModel);
+  const [option, setOption] = useState();
+  const options = useMemo(() => defaultOptions);
   const [tools, setTools] = useState([]);
   const chatContainerRef = useRef(null);
   const mainPageRef = useRef(null);
@@ -68,7 +71,8 @@ export function ChatProvider({
         conversationId: conversationId,
         message: message,
         provider: provider,
-        model: model
+        model: model,
+        option: option
       })
     });
     return await response.json();
@@ -110,7 +114,7 @@ export function ChatProvider({
     setInputValue('');
     setIsLoading(true);
     try {
-      let data = isPageAnalysisIntent(message) ? await analyzePage(message) : await answer(message);
+      let data = option === 'analyze' ? await analyzePage(message) : await answer(message);
       setConversationId(data.conversationId);
       setMessages(prev => [...prev, {
         role: data.role,
@@ -145,6 +149,9 @@ export function ChatProvider({
     setProvider,
     model,
     setModel,
+    options,
+    option,
+    setOption,
     tools,
     chatContainerRef,
     mainPageRef,
@@ -164,4 +171,17 @@ export function useChatContext() {
   }
   return context;
 }
-export default ChatContext;
+export default ChatContext;
+const defaultOptions = [{
+  value: 'ANALYZE',
+  label: '페이지 요약 및 분석',
+  icon: /*#__PURE__*/_jsx(WysiwygIcon, {
+    fontSize: "small"
+  })
+}, {
+  value: 'RAG',
+  label: '지식 베이스에서 문의',
+  icon: /*#__PURE__*/_jsx(AutoStoriesIcon, {
+    fontSize: "small"
+  })
+}];

package/dist/components/chat/{ChatInput.js → input/ChatInput.js}

@@ -1,8 +1,9 @@
-import React, { useRef, useEffect, useState } from 'react';
-import { Box, FormControl, IconButton, Stack, TextField } from '@mui/material';
+import React, { useEffect, useRef, useState } from 'react';
+import { Box, IconButton, Stack, TextField } from '@mui/material';
 import { Send as SendIcon } from '@mui/icons-material';
-import { useChatContext } from "./contexts/ChatContext";
+import { useChatContext } from "../contexts/ChatContext";
 import ModelSelect from "./ModelSelect";
+import Options from "./Options";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ChatInput = () => {
   const inputRef = useRef(null);
@@ -11,7 +12,10 @@ const ChatInput = () => {
     inputValue,
     setInputValue,
     isLoading,
-    sendMessage
+    sendMessage,
+    option,
+    setOption,
+    options
   } = useChatContext();
   const handleKeyPress = e => {
     if (e.key === 'Enter' && !e.shiftKey) {
@@ -21,7 +25,7 @@ const ChatInput = () => {
   };
   useEffect(() => {
     if (!isLoading && !selectOpen && inputRef.current) inputRef.current.focus();
-  }, [isLoading, selectOpen]);
+  }, [isLoading, selectOpen, option]);
   return /*#__PURE__*/_jsx(Box, {
     sx: styles.container,
     children: /*#__PURE__*/_jsxs(Stack, {
@@ -45,15 +49,21 @@ const ChatInput = () => {
       }), /*#__PURE__*/_jsxs(Stack, {
         direction: "row",
         gap: 2,
-        justifyContent: "flex-end",
+        justifyContent: "space-between",
         alignItems: "center",
-        children: [/*#__PURE__*/_jsx(FormControl, {
-          variant: "standard",
-          children: /*#__PURE__*/_jsx(ModelSelect, {
+        children: [/*#__PURE__*/_jsxs(Stack, {
+          direction: "row",
+          alignItems: "center",
+          gap: 2,
+          children: [/*#__PURE__*/_jsx(Options, {
+            options: options,
+            option: option,
+            setOption: setOption
+          }), /*#__PURE__*/_jsx(ModelSelect, {
             open: selectOpen,
             onOpen: () => setSelectOpen(true),
             onClose: () => setSelectOpen(false)
-          })
+          })]
         }), /*#__PURE__*/_jsx(IconButton, {
           onClick: sendMessage,
           disabled: isLoading || !inputValue.trim(),

package/dist/components/chat/{ModelSelect.js → input/ModelSelect.js}

@@ -1,6 +1,6 @@
 import React from "react";
 import { Box, Divider, MenuItem, Select } from "@mui/material";
-import { useChatContext } from "./contexts/ChatContext";
+import { useChatContext } from "../contexts/ChatContext";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 export default function ModelSelect({
   ...props
@@ -70,12 +70,11 @@ function findModel(providers, value) {
 const styles = {
   select: {
     color: '#666',
-    fontSize: '13px',
-    fontWeight: 400
+    fontSize: '11px'
   },
   name: {
     fontWeight: 400,
-    fontSize: '13px'
+    fontSize: '12px'
   },
   desc: {
     fontSize: '11px',

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

@@ -0,0 +1,72 @@
+import React from "react";
+import { ToggleButton, toggleButtonClasses, ToggleButtonGroup, toggleButtonGroupClasses, Tooltip, Typography } from "@mui/material";
+import { styled } from '@mui/material/styles';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({
+  theme
+}) => ({
+  gap: '5px',
+  [`& .${toggleButtonGroupClasses.firstButton}, & .${toggleButtonGroupClasses.middleButton}`]: {
+    borderTopRightRadius: '6px',
+    borderBottomRightRadius: '6px'
+  },
+  [`& .${toggleButtonGroupClasses.lastButton}, & .${toggleButtonGroupClasses.middleButton}`]: {
+    borderTopLeftRadius: '6px',
+    borderBottomLeftRadius: '6px'
+  },
+  [`& .${toggleButtonGroupClasses.lastButton}.${toggleButtonClasses.disabled}, & .${toggleButtonGroupClasses.middleButton}.${toggleButtonClasses.disabled}`]: {}
+}));
+export default function Options({
+  options = [],
+  option,
+  setOption,
+  ...props
+}) {
+  return /*#__PURE__*/_jsx(StyledToggleButtonGroup, {
+    exclusive: true,
+    value: option,
+    onChange: (_, value) => setOption(value),
+    children: options.map(o => /*#__PURE__*/_jsx(Tooltip, {
+      title: o.label,
+      slotProps: {
+        tooltip: {
+          sx: styles.tooltip
+        }
+      },
+      children: /*#__PURE__*/_jsxs(ToggleButton, {
+        value: o.value,
+        size: "small",
+        sx: styles.button(option === o.value),
+        ...props,
+        children: [o.icon, option === o.value && /*#__PURE__*/_jsx(Typography, {
+          sx: styles.text,
+          children: o.label
+        })]
+      })
+    }, o.value))
+  });
+}
+const styles = {
+  button: selected => ({
+    border: 'none',
+    width: selected ? 'auto' : '25px',
+    height: '25px',
+    minWidth: 0,
+    padding: selected ? '0 8px' : '0',
+    '&.Mui-selected': {
+      backgroundColor: '#333',
+      color: 'white',
+      '&:hover': {
+        backgroundColor: 'black'
+      }
+    }
+  }),
+  text: {
+    ml: 1,
+    fontSize: '11px',
+    whiteSpace: 'nowrap'
+  },
+  tooltip: {
+    fontSize: '10px'
+  }
+};

package/package.json

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