@nethru/kit 1.0.6 → 1.1.0

package/dist/components/chat/content/MarkdownContent.css

@@ -0,0 +1,151 @@
+.markdown-content {
+    white-space: normal;
+    word-wrap: break-word;
+    line-height: 1.6;
+}
+
+.markdown-content p {
+    margin: 0 0 0.75rem 0;
+}
+
+.markdown-content p:last-child {
+    margin-bottom: 0;
+}
+
+.markdown-content h1,
+.markdown-content h2,
+.markdown-content h3,
+.markdown-content h4,
+.markdown-content h5,
+.markdown-content h6 {
+    margin: 1rem 0 0.5rem 0;
+    font-weight: 600;
+    line-height: 1.3;
+}
+
+.markdown-content h1:first-child,
+.markdown-content h2:first-child,
+.markdown-content h3:first-child {
+    margin-top: 0;
+}
+
+.markdown-content h1 {
+    font-size: 1.5em;
+}
+
+.markdown-content h2 {
+    font-size: 1.3em;
+}
+
+.markdown-content h3 {
+    font-size: 1.15em;
+}
+
+.markdown-content h4 {
+    font-size: 1.05em;
+}
+
+.markdown-content ul,
+.markdown-content ol {
+    margin: 0.5rem 0;
+    padding-left: 1.5rem;
+}
+
+.markdown-content li {
+    margin: 0.25rem 0;
+}
+
+.markdown-content code {
+    background: rgba(0, 0, 0, 0.05);
+    padding: 0.15rem 0.3rem;
+    border-radius: 0.25rem;
+    font-family: 'Courier New', monospace;
+    font-size: 0.9em;
+}
+
+.message.user .markdown-content code {
+    background: rgba(255, 255, 255, 0.2);
+}
+
+.markdown-content pre {
+    background: rgba(0, 0, 0, 0.05);
+    padding: 0.75rem;
+    border-radius: 0.375rem;
+    overflow-x: auto;
+    margin: 0.5rem 0;
+}
+
+.markdown-content pre code {
+    background: transparent;
+    padding: 0;
+}
+
+.message.user .markdown-content pre {
+    background: rgba(255, 255, 255, 0.15);
+}
+
+.markdown-content strong {
+    font-weight: 700;
+}
+
+.markdown-content em {
+    font-style: italic;
+}
+
+.markdown-content a {
+    color: #667eea;
+    text-decoration: underline;
+}
+
+.message.user .markdown-content a {
+    color: rgba(255, 255, 255, 0.95);
+}
+
+.markdown-content blockquote {
+    border-left: 3px solid #667eea;
+    padding-left: 1rem;
+    margin: 0.75rem 0;
+    color: #666;
+}
+
+.message.user .markdown-content blockquote {
+    border-left-color: rgba(255, 255, 255, 0.5);
+    color: rgba(255, 255, 255, 0.9);
+}
+
+.markdown-content hr {
+    border: none;
+    border-top: 1px solid #e5e7eb;
+    margin: 1rem 0;
+}
+
+.message.user .markdown-content hr {
+    border-top-color: rgba(255, 255, 255, 0.3);
+}
+
+.markdown-content table {
+    border-collapse: collapse;
+    width: 100%;
+    margin: 0.75rem 0;
+}
+
+.markdown-content th,
+.markdown-content td {
+    border: 1px solid #e5e7eb;
+    padding: 0.5rem;
+    text-align: left;
+}
+
+.markdown-content th {
+    background: rgba(0, 0, 0, 0.05);
+    font-weight: 600;
+}
+
+.message.user .markdown-content th,
+.message.user .markdown-content td {
+    border-color: rgba(255, 255, 255, 0.3);
+}
+
+.message.user .markdown-content th {
+    background: rgba(255, 255, 255, 0.15);
+}

package/dist/components/chat/content/MarkdownContent.js

@@ -0,0 +1,14 @@
+import ReactMarkdown from 'react-markdown';
+import './MarkdownContent.css';
+import { jsx as _jsx } from "react/jsx-runtime";
+function MarkdownContent({
+  content
+}) {
+  return /*#__PURE__*/_jsx("div", {
+    className: "markdown-content",
+    children: /*#__PURE__*/_jsx(ReactMarkdown, {
+      children: content
+    })
+  });
+}
+export default MarkdownContent;

package/dist/components/chat/content/ToolContent.js

@@ -0,0 +1,86 @@
+import React, { useMemo } from "react";
+import { Box } from '@mui/material';
+import { useToolContext } from "../contexts/ToolContext";
+import ColumnChartContent from "./wisecollector/ColumnChartContent";
+import StackedAreaChartContent from "./wisecollector/StackedAreaChartContent";
+import PieChartContent from "./wisecollector/PieChartContent";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export default function ToolContent() {
+  const {
+    kinds,
+    tools
+  } = useToolContext();
+  const hasCompare = kinds.includes('COMPARE');
+  const jsonTools = [];
+  const querySummaryTools = useMemo(() => tools.filter(t => t.name === 'query-summary-by-task-id'), [tools]);
+  const queryTrendTools = useMemo(() => groupBySamePeriod(tools), [tools]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [hasCompare && querySummaryTools.length >= 2 ? /*#__PURE__*/_jsx(ColumnChartContent, {
+      tools: querySummaryTools
+    }) : querySummaryTools.map((tool, index) => /*#__PURE__*/_jsx(PieChartContent, {
+      tool: tool
+    }, index)), queryTrendTools.map((tools, index1) => {
+      if (hasCompare && tools.length >= 2) return /*#__PURE__*/_jsx(StackedAreaChartContent, {
+        tools: tools
+      }, index1);else {
+        return tools.map((tool, index2) => /*#__PURE__*/_jsx(StackedAreaChartContent, {
+          tools: [tool]
+        }, index2));
+      }
+    }), jsonTools.map((tool, index) => /*#__PURE__*/_jsxs(Box, {
+      className: "content-tool",
+      sx: styles.contentTool,
+      children: [/*#__PURE__*/_jsxs(Box, {
+        className: "tool-header",
+        sx: styles.toolHeader,
+        children: ["\uD83D\uDD27 ", tool.name]
+      }), /*#__PURE__*/_jsx(Box, {
+        component: "pre",
+        className: "tool-result",
+        sx: styles.toolResult,
+        children: JSON.stringify(tool.result?.result, null, 2)
+      })]
+    }, index))]
+  });
+}
+function groupBySamePeriod(tools) {
+  const periodMap = new Map();
+  tools.filter(t => t.name === 'query-trend-by-task-id').forEach(tool => {
+    const period = key(tool);
+    if (!periodMap.has(period)) periodMap.set(period, []);
+    periodMap.get(period).push(tool);
+  });
+  return Array.from(periodMap.values());
+  function key(tool) {
+    const {
+      from,
+      to
+    } = tool.arguments;
+    return `${from}-${to}`;
+  }
+}
+const styles = {
+  contentTool: {
+    marginTop: '0.5rem',
+    padding: '0.75rem',
+    background: '#f1f3f5',
+    borderRadius: '6px',
+    borderLeft: '3px solid #666'
+  },
+  toolHeader: {
+    fontWeight: 600,
+    marginBottom: '0.5rem',
+    color: '#333',
+    fontSize: '0.9rem'
+  },
+  toolResult: {
+    background: 'white',
+    padding: '0.75rem',
+    borderRadius: '6px',
+    overflowX: 'auto',
+    fontSize: '0.75rem',
+    lineHeight: 1.4,
+    margin: 0,
+    color: '#333'
+  }
+};

package/dist/components/chat/content/wisecollector/ColumnChartContent.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import { useToolContext } from "../../contexts/ToolContext";
+import { formatDateRange } from "../../../../js/dateHelper";
+import ColumnChart from "../../../charts/ColumnChart";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+const ColumnChartContent = ({
+  tools = []
+}) => {
+  const {
+    configMap
+  } = useToolContext();
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: tools.length > 0 && /*#__PURE__*/_jsx("div", {
+      style: {
+        display: 'flex',
+        justifyContent: 'center',
+        marginBottom: '30px'
+      },
+      children: /*#__PURE__*/_jsx(ColumnChart, {
+        data: toData(tools, configMap)
+      })
+    })
+  });
+};
+function toData(tools, configMap) {
+  const items = [];
+  const hasConvert = tools.some(content => content.result?.result[0]?.metric?.filter !== undefined);
+  tools.sort((a, b) => a.arguments.from.localeCompare(b.arguments.from)).forEach(content => {
+    const {
+      taskId,
+      from,
+      to
+    } = content.arguments;
+    const item = {
+      name: `<b>${configMap.get(taskId)}</b> <span style="font-size:10px">(${formatDateRange(from, to)})</span>`,
+      data: []
+    };
+    const result = reduce(content.result.result);
+    item.data.push(result.input);
+    item.data.push(result.output);
+    if (hasConvert) item.data.push(result.filter);
+    item.data.push(result.error);
+    items.push(item);
+  });
+  return {
+    colors: hasConvert ? ['#333333', '#2652a8', '#b47813', '#aa1a32'] : ['#333333', '#2652a8', '#aa1a32'],
+    categories: hasConvert ? ['입력', '처리', '필터', '에러'] : ['입력', '처리', '에러'],
+    series: items
+  };
+}
+function reduce(data) {
+  return data.reduce((acc, item) => {
+    acc.input += item.metric.input;
+    acc.output += item.metric.output;
+    acc.filter += item.metric.filter;
+    acc.error += item.metric.error;
+    return acc;
+  }, {
+    input: 0,
+    output: 0,
+    filter: 0,
+    error: 0
+  });
+}
+export default ColumnChartContent;

package/dist/components/chat/content/wisecollector/PieChartContent.js

@@ -0,0 +1,89 @@
+import React, { useMemo } from 'react';
+import PieChart from '../../../charts/PieChart';
+import { useToolContext } from "../../contexts/ToolContext";
+import { formatDateRange } from "../../../../js/dateHelper";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const PieChartContent = ({
+  tool
+}) => {
+  const width = useMemo(() => {
+    return tool?.result?.result?.length < 3 ? 300 : undefined;
+  }, []);
+  return /*#__PURE__*/_jsxs("div", {
+    children: [/*#__PURE__*/_jsx(Title, {
+      tool: tool
+    }), /*#__PURE__*/_jsx("div", {
+      style: {
+        display: 'flex',
+        justifyContent: 'center',
+        marginBottom: '30px'
+      },
+      children: toData(tool).map((item, index) => /*#__PURE__*/_jsx(PieChart, {
+        data: item,
+        width: width
+      }, index))
+    })]
+  });
+};
+const Title = ({
+  tool
+}) => {
+  const {
+    configMap
+  } = useToolContext();
+  const {
+    taskId,
+    from,
+    to
+  } = tool.arguments;
+  return /*#__PURE__*/_jsxs("div", {
+    style: titleStyles,
+    children: [/*#__PURE__*/_jsx("div", {
+      children: configMap.get(taskId)
+    }), /*#__PURE__*/_jsxs("div", {
+      style: subtitleStyles,
+      children: ["(", formatDateRange(from, to), ")"]
+    })]
+  });
+};
+function toData(tool) {
+  const items = [];
+  tool?.result?.result?.forEach(agent => {
+    const {
+      output,
+      filter,
+      error
+    } = agent.metric;
+    const item = {
+      name: agent.name,
+      metrics: []
+    };
+    item.metrics.push({
+      label: '처리',
+      value: output,
+      transparent: output === 0
+    });
+    if (filter) {
+      item.metrics.push({
+        label: '처리',
+        value: filter
+      });
+    }
+    item.metrics.push({
+      label: '에러',
+      value: error
+    });
+    items.push(item);
+  });
+  return items;
+}
+const titleStyles = {
+  fontSize: '14px',
+  fontWeight: '500',
+  textAlign: 'center'
+};
+const subtitleStyles = {
+  fontSize: '10px',
+  fontWeight: '100'
+};
+export default PieChartContent;

package/dist/components/chat/content/wisecollector/StackedAreaChartContent.js

@@ -0,0 +1,98 @@
+import React from 'react';
+import { useToolContext } from "../../contexts/ToolContext";
+import { isOneDay, isToday } from "../../../../js/dateHelper";
+import StackedAreaTrendChart from "../../../charts/StackedAreaTrendChart";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function StackedAreaChartContent({
+  tools
+}) {
+  const {
+    configMap
+  } = useToolContext();
+  return /*#__PURE__*/_jsx("div", {
+    children: /*#__PURE__*/_jsx(StackedAreaTrendChart, {
+      metrics: toMetrics(tools, configMap),
+      records: fillRecords(tools, toRecords(tools)),
+      isDaily: isDaily(tools),
+      xPlotIndex: xPlotIndex(tools),
+      xAxisTickInterval: 4,
+      height: 200
+    })
+  });
+}
+function toMetrics(tools, configMap) {
+  return tools.map(tool => ({
+    id: tool.arguments.taskId,
+    name: configMap.get(tool.arguments.taskId),
+    type: 'NUMBER'
+  }));
+}
+function toRecords(tools) {
+  const recordMap = new Map();
+  tools.forEach(tool => {
+    const {
+      taskId
+    } = tool.arguments;
+    const results = tool?.result?.result || [];
+    results.forEach(result => {
+      const {
+        time
+      } = result;
+      if (!recordMap.has(time)) recordMap.set(time, {
+        time: time,
+        metric: {}
+      });
+      recordMap.get(time).metric[taskId] = result.metric.output;
+    });
+  });
+  return Array.from(recordMap.values()).sort((a, b) => a.time - b.time);
+}
+function fillRecords(tools, records) {
+  const {
+    from,
+    to,
+    unit
+  } = tools[0].arguments;
+  if (!records || records.length === 0 || !isToday(from, to)) return records;
+  const lastRecord = records[records.length - 1];
+  const lastTime = lastRecord.time;
+  const year = parseInt(to.substring(0, 4));
+  const month = parseInt(to.substring(4, 6)) - 1;
+  const day = parseInt(to.substring(6, 8));
+  const toDate = new Date(year, month, day);
+  const nextDay = new Date(toDate.getTime() + 24 * 60 * 60 * 1000);
+  const midnightStr = `${nextDay.getFullYear()}-${String(nextDay.getMonth() + 1).padStart(2, '0')}-${String(nextDay.getDate()).padStart(2, '0')}T00:00:00+09:00`;
+  const midnightUTC = new Date(midnightStr).getTime();
+  const metricKeys = Object.keys(lastRecord.metric);
+  const unitMs = unit * 60 * 1000;
+  const result = [...records];
+  for (let time = lastTime + unitMs; time < midnightUTC; time += unitMs) {
+    const metric = {};
+    metricKeys.forEach(key => {
+      metric[key] = null;
+    });
+    result.push({
+      time,
+      metric
+    });
+  }
+  return result;
+}
+function isDaily(tools) {
+  const {
+    from,
+    to
+  } = tools[0].arguments;
+  return !isOneDay(from, to);
+}
+function xPlotIndex(tools) {
+  const tool = tools[0];
+  const {
+    from,
+    to
+  } = tools[0].arguments;
+  if (isToday(from, to)) {
+    const length = tool?.result?.result?.length;
+    return length !== undefined ? length - 1 : undefined;
+  }
+}

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

@@ -0,0 +1,31 @@
+import React, { createContext, useContext, useMemo } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+const ToolContext = /*#__PURE__*/createContext();
+export function ToolContextProvider({
+  message,
+  children
+}) {
+  const kinds = useMemo(() => message.kinds ?? [], [message]);
+  const tools = useMemo(() => message.content.filter(c => c.type === 'tool'), [message]);
+  const configMap = useMemo(() => makeTaskConfigs(tools), [tools]);
+  return /*#__PURE__*/_jsx(ToolContext.Provider, {
+    value: {
+      kinds: kinds,
+      tools,
+      configMap
+    },
+    children: children
+  });
+}
+export function useToolContext() {
+  return useContext(ToolContext);
+}
+function makeTaskConfigs(tools) {
+  const map = new Map();
+  tools.filter(t => t.name === 'search-task-by-keyword').forEach(tool => {
+    tool.result?.result?.forEach(item => {
+      map.set(item.taskId, item.name);
+    });
+  });
+  return map;
+}

package/dist/components/chat/hooks/useChatApi.js

@@ -0,0 +1,87 @@
+import { useEffect, useRef, useState } from 'react';
+import { getConfig } from "../../../js/config";
+const {
+  apiUrl
+} = getConfig();
+const useChatApi = defaultMessages => {
+  const [messages, setMessages] = useState(defaultMessages ? defaultMessages : []);
+  const [inputValue, setInputValue] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [conversationId, setConversationId] = useState(null);
+  const [tools, setTools] = useState([]);
+  const chatContainerRef = useRef(null);
+  useEffect(() => {
+    loadTools();
+  }, []);
+  useEffect(() => {
+    scrollToBottom();
+  }, [messages]);
+  const scrollToBottom = () => {
+    if (chatContainerRef.current) {
+      chatContainerRef.current.scrollTop = chatContainerRef.current.scrollHeight;
+    }
+  };
+  const loadTools = async () => {
+    try {
+      const response = await fetch(`${apiUrl}/api/mcp/tools`);
+      const data = await response.json();
+      setTools(data.tools);
+    } catch (error) {
+      console.error('Error loading tools:', error);
+    }
+  };
+  const sendMessage = async () => {
+    const message = inputValue.trim();
+    if (!message) return;
+    const userMessage = {
+      role: 'user',
+      content: [{
+        type: 'text',
+        value: message
+      }]
+    };
+    setMessages(prev => [...prev, userMessage]);
+    setInputValue('');
+    setIsLoading(true);
+    try {
+      const response = await fetch(`${apiUrl}/api/chat`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          message: message,
+          conversationId: conversationId
+        })
+      });
+      const data = await response.json();
+      setConversationId(data.conversationId);
+      setMessages(prev => [...prev, {
+        role: data.role,
+        kinds: data.kinds,
+        content: data.content
+      }]);
+    } catch (error) {
+      console.error('Error:', error);
+      setMessages(prev => [...prev, {
+        role: 'assistant',
+        content: [{
+          type: 'text',
+          value: '죄송합니다. 오류가 발생했습니다.'
+        }]
+      }]);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  return {
+    messages,
+    inputValue,
+    setInputValue,
+    isLoading,
+    tools,
+    chatContainerRef,
+    sendMessage
+  };
+};
+export default useChatApi;