@nethru/kit 1.1.3 → 1.1.5

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,81 @@
+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);
+  };
+  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/content/MarkdownContent.js

@@ -1,4 +1,5 @@
 import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
 import './MarkdownContent.css';
 import { jsx as _jsx } from "react/jsx-runtime";
 function MarkdownContent({
@@ -7,6 +8,7 @@ function MarkdownContent({
   return /*#__PURE__*/_jsx("div", {
     className: "markdown-content",
     children: /*#__PURE__*/_jsx(ReactMarkdown, {
+      remarkPlugins: [remarkGfm],
       children: content
     })
   });

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

@@ -10,10 +10,14 @@ export function ChatProvider({
   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();
@@ -23,6 +27,18 @@ export function ChatProvider({
       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
@@ -59,7 +75,9 @@ export function ChatProvider({
         },
         body: JSON.stringify({
           message: message,
-          conversationId: conversationId
+          conversationId: conversationId,
+          provider: provider,
+          model: model
         })
       });
       const data = await response.json();
@@ -92,6 +110,11 @@ export function ChatProvider({
     inputValue,
     setInputValue,
     isLoading,
+    providers,
+    provider,
+    setProvider,
+    model,
+    setModel,
     tools,
     chatContainerRef,
     sendMessage,

package/dist/components/chat/mock.js

@@ -721,16 +721,29 @@ 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": "현재 등록된 컨테이너 목록은 아래와 같습니다 👇  \n\n| ID | 유형 | 이름 | URL | 활성화 여부 |\n|----|------|------|------|--------------|\n| 00001 | WEB | 와이즈컬렉터3 | [https://wc.nethru.co.kr](https://wc.nethru.co.kr) | ✅ 활성 |\n| 00003 | WEB | 넷스루 홈페이지 | [http://www.nethru.co.kr](http://www.nethru.co.kr) | ✅ 활성 |\n| 00004 | WEB | WC몰 | [https://wcmall.nethru.co.kr](https://wcmall.nethru.co.kr) | ✅ 활성 |\n| 00005 | WEB | Google Arts & Culture | [https://artsandculture.google.com](https://artsandculture.google.com) | ✅ 활성 |\n| 00006 | MOBILE | OmniNotes | [https://www.omnintes.com](https://www.omnintes.com) | ✅ 활성 |\n| 00007 | MOBILE | Plaid | [https://www.plaid.com](https://www.plaid.com) | ✅ 활성 |\n| 00008 | MOBILE | 안드로이드 샘플앱 | [http://www.androidtest.com](http://www.androidtest.com) | ✅ 활성 |\n| 00009 | MOBILE | 엄니노트 | [https://www.omnintes.com](https://www.omnintes.com) | ✅ 활성 |\n| 00026 | WEB | 신수민티스토리 | [https://nethoomru.tistory.com](https://nethoomru.tistory.com) | ✅ 활성 |\n| 00710 | WEB | solmin_test2 | [https://wc-solmin.tistory.com](https://wc-solmin.tistory.com) | ✅ 활성 |\n| 00711 | MOBILE | KB Pay | [https://kbpay.kbcard.com](https://kbpay.kbcard.com) | ✅ 활성 |\n| 00712 | MOBILE | OmniNotes2 | [https://www.omnintes.com](https://www.omnintes.com) | ✅ 활성 |\n| 00715 | WEB | test2 | [https://wc-solmin.tistory.com](https://wc-solmin.tistory.com) | ❌ 비활성 |\n| 00718 | MOBILE | iOS 샘플앱 | [http://www.iostest.com](http://www.iostest.com) | ✅ 활성 |\n| 00742 | MOBILE | 모바일 샘플앱 250903 (iOS 테스트 임시) | [http://www.androidtest.com](http://www.androidtest.com) | ✅ 활성 |\n| 00743 | MOBILE | 요기요 | [https://www.yogiyo.co.kr](https://www.yogiyo.co.kr) | ✅ 활성 |\n| 00744 | MOBILE | 사내 TFT 예제 - KBPay | [https://www.tftex1.co.kr](https://www.tftex1.co.kr) | ✅ 활성 |\n| 00745 | MOBILE | OmniNotes-soomsoom | [https://www.omnintes.com](https://www.omnintes.com) | ✅ 활성 |\n| 00746 | MOBILE | 믿고걸_뉴스 | [http://www.worthskippingnews.com](http://www.worthskippingnews.com) | ✅ 활성 |\n| 00747 | WEB | KB 은행 | [https://www.kbstar.com](https://www.kbstar.com) | ✅ 활성 |\n| 00748 | MOBILE | test251127 | [http://www.test251127.com](http://www.test251127.com) | ❌ 비활성 |\n| 00764 | MOBILE | test749 | [http://w.a.com](http://w.a.com) | ❌ 비활성 |\n| 00765 | MOBILE | test750 | [http://www.test.com](http://www.test.com) | ❌ 비활성 |\n\n총 **24개 컨테이너**가 등록되어 있으며, 이 중 **18개는 활성화**, **6개는 비활성화** 상태입니다.  \n\n특정 컨테이너(예: “KB Pay”나 “와이즈컬렉터3”)의 **태스크 목록이나 설정 세부 정보**를 보고 싶으신가요?"
+  }, {
+    type: "text",
+    value: "# Hello\n" + "https://example.org\n" + "```sh\n" + "# Code block\n" + "const func = () => {};\n" + "```\n" + "![Placeholder image](https://unsplash.it/600/400)\n" + "\n" + "~~strike~~ this\n" + "\n" + "[MIT](license) © [Titus Wormer](https://wooorm.com)\n" + "## TODO\n" + "\n" + "* [ ]  This\n" + "* [ ]  That\n" + "* [x]  The other\n" + "\n" + "|Fahrenheit|Celsius|Kelvin|\n" + "|---:|---:|---:|\n" + "|-459.67|-273.15|0|\n" + "|-40|-40|233.15|\n" + "|32|0|273.15|\n" + "|212|100|373.15|\n"
+  }, {
     type: 'text',
     value: '안녕하세요! 저는 회사 내부 정보와 다양한 기능에 접근할 수 있는 AI 어시스턴트입니다.\n무엇을 도와드릴까요?'
   }]

package/package.json

@@ -1,9 +1,12 @@
 {
   "name": "@nethru/kit",
-  "version": "1.1.3",
+  "version": "1.1.5",
   "description": "A React component library by Nethru",
   "main": "dist/index.js",
   "homepage": ".",
+  "publishConfig": {
+    "access": "public"
+  },
   "files": [
     "/dist"
   ],
@@ -47,7 +50,8 @@
     "@nethru/ui": "^2.1.45",
     "highcharts": "^11.3.0",
     "highcharts-react-official": "^3.2.1",
-    "react-markdown": "^10.1.0"
+    "react-markdown": "^10.1.0",
+    "remark-gfm": "^4.0.1"
   },
   "browserslist": {
     "production": [