@nethru/kit 1.1.2 → 1.1.4

package/dist/components/chat/AiChat.js

@@ -1,11 +1,10 @@
 import React from 'react';
 import { Stack } from "@mui/material";
+import { useChatContext } from './contexts/ChatContext';
 import ChatMessages from './ChatMessages';
 import ChatInput from './ChatInput';
-import useChatApi from './hooks/useChatApi';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function AiChat({
-  defaultMessages,
   sx
 }) {
   const {
@@ -15,7 +14,7 @@ function AiChat({
     isLoading,
     chatContainerRef,
     sendMessage
-  } = useChatApi(defaultMessages);
+  } = useChatContext();
   return /*#__PURE__*/_jsxs(Stack, {
     sx: {
       ...styles.container,
@@ -37,7 +36,7 @@ export default AiChat;
 const styles = {
   container: {
     width: '100%',
-    height: '90vh',
+    height: '100%',
     background: 'white',
     display: 'flex',
     flexDirection: 'column',

package/dist/components/chat/ChatInput.js

@@ -1,6 +1,7 @@
 import React from 'react';
-import { Box, FormControl, IconButton, MenuItem, Select, Stack, TextField } from '@mui/material';
+import { Box, FormControl, IconButton, Stack, TextField } from '@mui/material';
 import { Send as SendIcon } from '@mui/icons-material';
+import ModelSelect from "./ModelSelect";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ChatInput = ({
   inputValue,
@@ -8,7 +9,6 @@ const ChatInput = ({
   onSend,
   isLoading
 }) => {
-  const [model, setModel] = React.useState('GPT_4_1_MINI');
   const handleKeyPress = e => {
     if (e.key === 'Enter' && !e.shiftKey) {
       e.preventDefault();
@@ -41,22 +41,7 @@ const ChatInput = ({
         alignItems: "center",
         children: [/*#__PURE__*/_jsx(FormControl, {
           variant: "standard",
-          children: /*#__PURE__*/_jsxs(Select, {
-            variant: "standard",
-            value: model,
-            onChange: e => setModel(e.target.value),
-            disableUnderline: true,
-            sx: {
-              fontSize: '13px'
-            },
-            children: [/*#__PURE__*/_jsx(MenuItem, {
-              value: "GPT_4_1_MINI",
-              children: "GPT-4.1 Mini"
-            }), /*#__PURE__*/_jsx(MenuItem, {
-              value: "CLAUDE_3",
-              children: "Claude 3"
-            })]
-          })
+          children: /*#__PURE__*/_jsx(ModelSelect, {})
         }), /*#__PURE__*/_jsx(IconButton, {
           onClick: onSend,
           disabled: isLoading || !inputValue.trim(),

package/dist/components/chat/ChatMessage.js

@@ -40,7 +40,7 @@ const styles = {
     wordWrap: 'break-word',
     fontSize: '13px',
     animation: `${slideIn} 0.3s ease`,
-    color: '#333',
+    color: '#555',
     background: '#ecedee',
     alignSelf: 'flex-end',
     marginLeft: 'auto',
@@ -64,7 +64,7 @@ const styles = {
     wordWrap: 'break-word',
     fontSize: '13px',
     animation: `${slideIn} 0.3s ease`,
-    color: '#333',
+    color: '#555',
     alignSelf: 'flex-start'
   },
   contentItem: {

package/dist/components/chat/ChatMessages.js

@@ -25,7 +25,7 @@ const styles = {
   container: {
     flex: 1,
     overflowY: 'auto',
-    padding: '1.5rem',
+    padding: '10px',
     display: 'flex',
     flexDirection: 'column',
     gap: '1rem',

package/dist/components/chat/ModelSelect.js

@@ -0,0 +1,82 @@
+import React from "react";
+import { Box, Divider, MenuItem, Select } from "@mui/material";
+import { useChatContext } from "./contexts/ChatContext";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export default function ModelSelect() {
+  const {
+    model,
+    setModel,
+    provider,
+    setProvider,
+    providers
+  } = useChatContext();
+  const onChange = event => {
+    const {
+      value
+    } = event.target;
+    setProvider(findProvider(providers, value)?.provider);
+    setModel(findModel(providers, value)?.id);
+  };
+  console.log(provider, model);
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: providers.length > 0 && /*#__PURE__*/_jsx(Select, {
+      variant: "standard",
+      value: model,
+      onChange: onChange,
+      disableUnderline: true,
+      sx: styles.select,
+      renderValue: value => findModel(providers, value)?.name,
+      children: makeOptions(providers)
+    })
+  });
+}
+function makeOptions(providers) {
+  const jsx = [];
+  providers.forEach((provider, index) => {
+    if (index > 0) jsx.push(/*#__PURE__*/_jsx(Divider, {}, index));
+    provider.models.forEach(model => {
+      jsx.push(/*#__PURE__*/_jsx(MenuItem, {
+        value: model.id,
+        children: /*#__PURE__*/_jsxs(Box, {
+          children: [/*#__PURE__*/_jsx(Box, {
+            sx: styles.name,
+            children: model.name
+          }), /*#__PURE__*/_jsx(Box, {
+            sx: styles.desc,
+            children: model.description
+          })]
+        })
+      }, model.id));
+    });
+  });
+  return jsx;
+}
+function findProvider(providers, value) {
+  for (const provider of providers) {
+    for (const model of provider.models) {
+      if (model.id === value) return provider;
+    }
+  }
+}
+function findModel(providers, value) {
+  for (const provider of providers) {
+    for (const model of provider.models) {
+      if (model.id === value) return model;
+    }
+  }
+}
+const styles = {
+  select: {
+    color: '#666',
+    fontSize: '13px',
+    fontWeight: 400
+  },
+  name: {
+    fontWeight: 400,
+    fontSize: '13px'
+  },
+  desc: {
+    fontSize: '11px',
+    fontWeight: 200
+  }
+};

package/dist/components/chat/{hooks/useChatApi.js → contexts/ChatContext.js}

@@ -1,14 +1,23 @@
-import { useEffect, useRef, useState } from 'react';
+import React, { createContext, useContext, useEffect, useRef, useState } from 'react';
 import { getConfig } from "../../../js/config";
-const useChatApi = defaultMessages => {
-  const [messages, setMessages] = useState(defaultMessages ? defaultMessages : []);
+import { jsx as _jsx } from "react/jsx-runtime";
+const ChatContext = /*#__PURE__*/createContext();
+export function ChatProvider({
+  children,
+  defaultMessages = []
+}) {
+  const [messages, setMessages] = useState(defaultMessages);
   const [inputValue, setInputValue] = useState('');
   const [isLoading, setIsLoading] = useState(false);
   const [conversationId, setConversationId] = useState(null);
+  const [provider, setProvider] = useState('OPENAI');
+  const [providers, setProviders] = useState([]);
+  const [model, setModel] = useState('gpt-4.1-mini');
   const [tools, setTools] = useState([]);
   const chatContainerRef = useRef(null);
   useEffect(() => {
-    loadTools();
+    loadModels();
+    // loadTools();
   }, []);
   useEffect(() => {
     scrollToBottom();
@@ -18,6 +27,18 @@ const useChatApi = defaultMessages => {
       chatContainerRef.current.scrollTop = chatContainerRef.current.scrollHeight;
     }
   };
+  const loadModels = async () => {
+    const {
+      apiUrl
+    } = getConfig();
+    try {
+      const response = await fetch(`${apiUrl}/api/models/provider`);
+      const data = await response.json();
+      setProviders(data);
+    } catch (error) {
+      console.error('Error loading models:', error);
+    }
+  };
   const loadTools = async () => {
     const {
       apiUrl
@@ -54,7 +75,9 @@ const useChatApi = defaultMessages => {
         },
         body: JSON.stringify({
           message: message,
-          conversationId: conversationId
+          conversationId: conversationId,
+          provider: provider,
+          model: model
         })
       });
       const data = await response.json();
@@ -77,14 +100,37 @@ const useChatApi = defaultMessages => {
       setIsLoading(false);
     }
   };
-  return {
+  const clearChat = () => {
+    setMessages([]);
+    setConversationId(null);
+    setInputValue('');
+  };
+  const value = {
     messages,
     inputValue,
     setInputValue,
     isLoading,
+    providers,
+    provider,
+    setProvider,
+    model,
+    setModel,
     tools,
     chatContainerRef,
-    sendMessage
+    sendMessage,
+    clearChat,
+    conversationId
   };
-};
-export default useChatApi;
+  return /*#__PURE__*/_jsx(ChatContext.Provider, {
+    value: value,
+    children: children
+  });
+}
+export function useChatContext() {
+  const context = useContext(ChatContext);
+  if (!context) {
+    throw new Error('useChatContext must be used within a ChatProvider');
+  }
+  return context;
+}
+export default ChatContext;

package/dist/components/chat/mock.js

@@ -721,16 +721,23 @@ const mockTrendConvert2 = {
 export const defaultMessages = [{
   role: 'assistant',
   // kinds: [],
-  kinds: ['COMPARE'],
-  content: [mockTrendConvert1, {
-    ...mockTrendConvert1,
-    "arguments": {
-      "taskId": "wc_convert_2",
-      "from": "20251210",
-      "to": "20251210",
-      "unit": "30"
-    }
-  }, mockTrendConvert2, mockSummary1, mockSummary2, mockSearchTaskByKeyword, {
+  //kinds: ['COMPARE'],
+  content: [
+  // mockTrendConvert1,
+  // {
+  //     ...mockTrendConvert1,
+  //     "arguments": {
+  //         "taskId": "wc_convert_2",
+  //         "from": "20251210",
+  //         "to": "20251210",
+  //         "unit": "30"
+  //     }
+  // },
+  // mockTrendConvert2,
+  // mockSummary1,
+  // mockSummary2,
+  // mockSearchTaskByKeyword,
+  {
     type: 'text',
     value: '안녕하세요! 저는 회사 내부 정보와 다양한 기능에 접근할 수 있는 AI 어시스턴트입니다.\n무엇을 도와드릴까요?'
   }]

package/dist/index.js

@@ -1,5 +1,6 @@
 export { configure, getConfig } from './js/config';
 export { default as AiChat } from './components/chat/AiChat';
+export { ChatProvider, useChatContext } from './components/chat/contexts/ChatContext';
 export { default as PieChart } from './components/charts/PieChart';
 export { default as ColumnChart } from './components/charts/ColumnChart';
 export { default as StackedAreaTrendChart } from './components/charts/StackedAreaTrendChart';

package/package.json

@@ -1,9 +1,12 @@
 {
   "name": "@nethru/kit",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "description": "A React component library by Nethru",
   "main": "dist/index.js",
   "homepage": ".",
+  "publishConfig": {
+    "access": "public"
+  },
   "files": [
     "/dist"
   ],