@nethru/kit 1.1.17 → 1.1.19

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/content/ToolContent.js

@@ -1,13 +1,15 @@
-import React, { useMemo } from "react";
+import React, { useCallback, useMemo } from "react";
 import { Box, Stack } from '@mui/material';
 import { useToolContext } from "../contexts/ToolContext";
 import ColumnChartContent from "./wisecollector/ColumnChartContent";
 import StackedAreaChartContent from "./wisecollector/StackedAreaChartContent";
 import PieChartContent from "./wisecollector/PieChartContent";
 import PeriodCompareChartContent from "./wisecollector/PeriodCompareChartContent";
+import StackedAreaTrendChartWithSelectContent from "./wisecollector/StackedAreaTrendChartWithSelectContent";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const summaryToolNames = ['query-summary-by-container-id', 'query-summary-by-task-id'];
 const trendToolNames = ['query-trend-by-container-id', 'query-trend-by-task-id'];
+const trendDetailToolNames = ['query-trend-detail-by-task-id'];
 export default function ToolContent() {
   const {
     kinds,
@@ -18,24 +20,49 @@ export default function ToolContent() {
   const summaryTools = useMemo(() => tools.filter(t => summaryToolNames.includes(t.name)), [tools]);
   const {
     periodTrendTools,
-    trendTools
-  } = useMemo(() => groupTools(hasCompare, tools), [tools]);
+    trendTools,
+    trendDetailTools
+  } = useMemo(() => groupBy(hasCompare, tools), [tools, hasCompare]);
   const toolCount = useMemo(() => summaryTools.length + periodTrendTools.length + trendTools.length + jsonTools.length, [summaryTools, periodTrendTools, trendTools, jsonTools]);
+  const taskType = useMemo(() => {
+    return tools.find(t => t.name === "search-task-by-keyword")?.result?.result[0]?.taskType;
+  }, [tools]);
+  const getSeriesKeyByTrend = useCallback(tools => {
+    return tools?.some(t => t.name === 'query-trend-by-container-id') ? 'containerId' : 'taskId';
+  }, []);
+  const getSeriesKeyBySummary = useCallback(tool => {
+    return tool.name === 'query-summary-by-container-id' ? 'containerId' : 'taskId';
+  }, []);
   return /*#__PURE__*/_jsxs(Stack, {
     gap: 5,
     marginBottom: toolCount > 0 ? 5 : 0,
     children: [hasCompare && summaryTools.length >= 2 ? /*#__PURE__*/_jsx(ColumnChartContent, {
-      tools: summaryTools
+      tools: summaryTools,
+      seriesKeyFunc: getSeriesKeyBySummary
     }) : summaryTools.map((tool, index) => /*#__PURE__*/_jsx(PieChartContent, {
-      tool: tool
+      tool: tool,
+      seriesKeyFunc: getSeriesKeyBySummary
     }, index)), periodTrendTools.map((tools, index) => /*#__PURE__*/_jsx(PeriodCompareChartContent, {
-      tools: tools
+      tools: tools,
+      seriesKey: getSeriesKeyByTrend(tools)
     }, index)), trendTools.map((tools, index1) => {
       if (hasCompare && tools.length >= 2) return /*#__PURE__*/_jsx(StackedAreaChartContent, {
-        tools: tools
+        tools: tools,
+        seriesKey: getSeriesKeyByTrend(tools)
       }, index1);else {
         return tools.map((tool, index2) => /*#__PURE__*/_jsx(StackedAreaChartContent, {
-          tools: [tool]
+          tools: [tool],
+          seriesKey: getSeriesKeyByTrend([tool])
+        }, index2));
+      }
+    }), trendDetailTools.map((tools, index) => {
+      if (hasCompare && tools.length >= 2) return /*#__PURE__*/_jsx(StackedAreaTrendChartWithSelectContent, {
+        tools: tools,
+        selectKey: taskType
+      }, index);else {
+        return tools.map((tool, index2) => /*#__PURE__*/_jsx(StackedAreaTrendChartWithSelectContent, {
+          tools: [tool],
+          selectKey: taskType
         }, index2));
       }
     }), jsonTools.map((tool, index) => /*#__PURE__*/_jsxs(Box, {
@@ -54,15 +81,32 @@ export default function ToolContent() {
     }, index))]
   });
 }
+function groupBy(hasCompare, tools) {
+  const trendTools = tools.filter(t => trendToolNames.includes(t.name));
+  const trendDetailTools = tools.filter(t => trendDetailToolNames.includes(t.name));
+  if (trendTools.length > 0 || trendDetailTools.length > 0) {
+    const groupedTrend = groupTools(hasCompare, trendTools);
+    const groupedTrendDetail = groupTools(hasCompare, trendDetailTools);
+    return {
+      periodTrendTools: groupedTrend.periodTrendTools,
+      trendTools: groupedTrend.tools,
+      trendDetailTools: groupedTrendDetail.tools
+    };
+  }
+  return {
+    periodTrendTools: [],
+    trendTools: [],
+    trendDetailTools: []
+  };
+}
 function groupTools(hasCompare, tools) {
   const periodKey = t => `${t.arguments.from}~${t.arguments.to}`;
   const idMap = new Map();
   const periodMap = new Map();
   const used = new Set();
-  const filtered = tools.filter(t => trendToolNames.includes(t.name));
   const periodTrendTools = [];
-  if (hasCompare) {
-    for (const tool of filtered) {
+  if (hasCompare && tools.every(t => !trendDetailToolNames.includes(t.name))) {
+    for (const tool of tools) {
       const id = tool.arguments.containerId ?? tool.arguments.taskId;
       if (!idMap.has(id)) idMap.set(id, []);
       idMap.get(id).push(tool);
@@ -78,7 +122,7 @@ function groupTools(hasCompare, tools) {
       }
     }
   }
-  for (const tool of filtered) {
+  for (const tool of tools) {
     if (used.has(tool)) continue;
     const key = periodKey(tool);
     if (!periodMap.has(key)) periodMap.set(key, []);
@@ -86,7 +130,7 @@ function groupTools(hasCompare, tools) {
   }
   return {
     periodTrendTools,
-    trendTools: Array.from(periodMap.values())
+    tools: Array.from(periodMap.values())
   };
 }
 const styles = {

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

@@ -4,7 +4,8 @@ import { formatDateRange } from "../../../../js/dateHelper";
 import ColumnChart from "../../../charts/ColumnChart";
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 const ColumnChartContent = ({
-  tools = []
+  tools = [],
+  seriesKeyFunc
 }) => {
   const {
     getName
@@ -17,12 +18,12 @@ const ColumnChartContent = ({
         marginBottom: '30px'
       },
       children: /*#__PURE__*/_jsx(ColumnChart, {
-        data: toData(tools, getName)
+        data: toData(tools, seriesKeyFunc, getName)
       })
     })
   });
 };
-function toData(tools, getName) {
+function toData(tools, seriesKeyFunc, getName) {
   const items = [];
   const hasConvert = tools.some(tool => {
     const result = tool?.result?.result;
@@ -30,13 +31,12 @@ function toData(tools, getName) {
   });
   tools.sort((a, b) => a.arguments.from.localeCompare(b.arguments.from)).forEach(tool => {
     const {
-      containerId,
-      taskId,
       from,
       to
     } = tool.arguments;
+    const seriesKey = seriesKeyFunc(tool);
     const item = {
-      name: `<b>${getName(containerId, taskId)}</b> <span style="font-size:10px">(${formatDateRange(from, to)})</span>`,
+      name: `<b>${getName(tool.arguments[seriesKey])}</b> <span style="font-size:10px">(${formatDateRange(from, to)})</span>`,
       data: []
     };
     const result = Array.isArray(tool.result.result) ? reduce(tool.result.result) : tool.result.result;

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

@@ -7,12 +7,14 @@ import { formatDuration } from "../../../charts/Number";
 import { formatMinutes } from "../../../charts/Time";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default function PeriodCompareChartContent({
-  tools
+  tools,
+  seriesKey
 }) {
   const chartData = useMemo(() => toChartData(tools), [tools]);
   return /*#__PURE__*/_jsxs("div", {
     children: [/*#__PURE__*/_jsx(Title, {
-      tools: tools
+      tools: tools,
+      seriesKey: seriesKey
     }), /*#__PURE__*/_jsx(PeriodCompareChart, {
       ...chartData,
       height: 220
@@ -20,18 +22,15 @@ export default function PeriodCompareChartContent({
   });
 }
 function Title({
-  tools
+  tools,
+  seriesKey
 }) {
   const {
     getName
   } = useToolContext();
-  const {
-    containerId,
-    taskId
-  } = tools[0].arguments;
   return /*#__PURE__*/_jsx("div", {
     style: styles.title,
-    children: getName(containerId, taskId)
+    children: getName(tools[0].arguments[seriesKey])
   });
 }
 function toChartData(tools) {

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

@@ -4,14 +4,16 @@ import { useToolContext } from "../../contexts/ToolContext";
 import { formatDateRange } from "../../../../js/dateHelper";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const PieChartContent = ({
-  tool
+  tool,
+  seriesKeyFunc
 }) => {
   const width = useMemo(() => {
     return tool?.result?.result?.length < 3 ? 300 : undefined;
   }, []);
   return /*#__PURE__*/_jsxs("div", {
     children: [/*#__PURE__*/_jsx(Title, {
-      tool: tool
+      tool: tool,
+      seriesKeyFunc: seriesKeyFunc
     }), /*#__PURE__*/_jsx("div", {
       style: styles.container,
       children: toData(tool).map((item, index) => /*#__PURE__*/_jsx(PieChart, {
@@ -22,21 +24,21 @@ const PieChartContent = ({
   });
 };
 const Title = ({
-  tool
+  tool,
+  seriesKeyFunc
 }) => {
   const {
     getName
   } = useToolContext();
   const {
-    containerId,
-    taskId,
     from,
     to
   } = tool.arguments;
+  const seriesKey = seriesKeyFunc(tool);
   return /*#__PURE__*/_jsxs("div", {
     style: styles.title,
     children: [/*#__PURE__*/_jsx("div", {
-      children: getName(containerId, taskId)
+      children: getName(tool.arguments[seriesKey])
     }), /*#__PURE__*/_jsxs("div", {
       style: styles.subtitle,
       children: ["(", formatDateRange(from, to), ")"]

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

@@ -4,35 +4,47 @@ import { isOneDay, isToday } from "../../../../js/dateHelper";
 import StackedAreaTrendChart from "../../../charts/StackedAreaTrendChart";
 import { jsx as _jsx } from "react/jsx-runtime";
 export default function StackedAreaChartContent({
-  tools
+  tools,
+  seriesKey,
+  type = 'output',
+  ...props
 }) {
   const {
     getName
   } = useToolContext();
   return /*#__PURE__*/_jsx("div", {
     children: /*#__PURE__*/_jsx(StackedAreaTrendChart, {
-      metrics: toMetrics(tools, getName),
-      records: fillRecords(tools, toRecords(tools)),
+      metrics: toMetrics(tools, seriesKey, getName),
+      records: fillRecords(tools, toRecords(type, seriesKey, tools)),
       isDaily: isDaily(tools),
       xPlotIndex: xPlotIndex(tools),
       xAxisTickInterval: 4,
-      height: 200
+      height: 200,
+      ...props
     })
   });
 }
-function toMetrics(tools, getName) {
-  return tools.map(tool => ({
-    id: tool.arguments.taskId,
-    name: getName(tool.arguments.containerId, tool.arguments.taskId),
-    type: 'NUMBER'
-  }));
+function toMetrics(tools, seriesKey, getName) {
+  const formatId = tool => `${tool.arguments.agentId} - ${tool.arguments.taskId}`;
+  const formatName = tool => `${getName(tool.arguments.agentId)} - ${getName(tool.arguments.taskId)}`;
+  if (isAgentId(seriesKey)) {
+    return tools.map(tool => ({
+      id: formatId(tool),
+      name: formatName(tool),
+      type: 'NUMBER'
+    }));
+  } else {
+    return tools.map(tool => ({
+      id: tool.arguments[seriesKey],
+      name: getName(tool.arguments[seriesKey]),
+      type: 'NUMBER'
+    }));
+  }
 }
-function toRecords(tools) {
+function toRecords(type, seriesKey, tools) {
   const recordMap = new Map();
   tools.forEach(tool => {
-    const {
-      taskId
-    } = tool.arguments;
+    const id = isAgentId(seriesKey) ? `${tool.arguments.agentId} - ${tool.arguments.taskId}` : tool.arguments[seriesKey];
     const results = tool?.result?.result || [];
     results.forEach(result => {
       const {
@@ -42,7 +54,7 @@ function toRecords(tools) {
         time: time,
         metric: {}
       });
-      recordMap.get(time).metric[taskId] = result.metric.output;
+      recordMap.get(time).metric[id] = result.metric[type];
     });
   });
   return Array.from(recordMap.values()).sort((a, b) => a.time - b.time);
@@ -78,6 +90,9 @@ function fillRecords(tools, records) {
   }
   return result;
 }
+function isAgentId(seriesKey) {
+  return seriesKey === 'agentId';
+}
 function isDaily(tools) {
   const {
     from,

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

@@ -0,0 +1,75 @@
+import React, { useMemo, useState } from "react";
+import { MenuItem, Select } from "@nethru/ui";
+import * as ChartColors from "../../../charts/ChartColors";
+import StackedAreaChartContent from "./StackedAreaChartContent";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const metrics = {
+  collect: 'output',
+  convert: [{
+    label: '처리',
+    key: 'output'
+  }, {
+    label: '필터됨',
+    key: 'filter'
+  }, {
+    label: '에러',
+    key: 'error'
+  }],
+  transport: [{
+    label: '처리',
+    key: 'output'
+  }, {
+    label: '에러',
+    key: 'error'
+  }]
+};
+export default function StackedAreaTrendChartWithSelectContent({
+  tools,
+  selectKey,
+  ...props
+}) {
+  const [metric, setMetric] = useState('output');
+  const colors = useMemo(() => {
+    return tools.map((_, index) => ChartColors.colors[(index + 1) % ChartColors.colors.length]);
+  }, [tools]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [selectKey !== undefined && Array.isArray(metrics[selectKey]) && /*#__PURE__*/_jsx(MetricSelect, {
+      value: metric,
+      onChange: e => setMetric(e.target.value),
+      type: selectKey
+    }), /*#__PURE__*/_jsx("div", {
+      children: /*#__PURE__*/_jsx(StackedAreaChartContent, {
+        seriesKey: "agentId",
+        type: metric,
+        tools: tools,
+        tooltipOutSide: selectKey !== 'collect',
+        yAxisLabelEnabled: false,
+        colors: colors,
+        legendAlign: "right",
+        height: 220,
+        ...props
+      })
+    })]
+  });
+}
+function MetricSelect({
+  value,
+  onChange,
+  type
+}) {
+  return /*#__PURE__*/_jsx(Select, {
+    value: value,
+    onChange: onChange,
+    sx: {
+      position: 'absolute',
+      top: '34px',
+      left: '6px',
+      zIndex: 1,
+      width: '92px'
+    },
+    children: metrics[type].map(metric => /*#__PURE__*/_jsx(MenuItem, {
+      value: metric.key,
+      children: metric.label
+    }, metric.key))
+  });
+}

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

@@ -101,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);
@@ -140,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,
@@ -159,6 +165,7 @@ export function ChatProvider({
     chatContainerRef,
     pageRef,
     sendMessage,
+    retrySend,
     clearChat,
     conversationId
   };

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

@@ -9,8 +9,9 @@ export function ToolContextProvider({
   const tools = useMemo(() => message.content.filter(c => c.type === 'tool'), [message]);
   const containerConfigMap = useMemo(() => makeContainerConfigs(tools), [tools]);
   const taskConfigMap = useMemo(() => makeTaskConfigs(tools), [tools]);
-  const getName = useCallback((containerId, taskId) => {
-    return containerConfigMap.get(containerId) || taskConfigMap.get(taskId);
+  const agentConfigMap = useMemo(() => makeAgentConfigs(tools), [tools]);
+  const getName = useCallback(id => {
+    return containerConfigMap.get(id) || taskConfigMap.get(id) || agentConfigMap.get(id);
   }, [containerConfigMap, taskConfigMap]);
   return /*#__PURE__*/_jsx(ToolContext.Provider, {
     value: {
@@ -43,4 +44,13 @@ function makeTaskConfigs(tools) {
     });
   });
   return map;
+}
+function makeAgentConfigs(tools) {
+  const map = new Map();
+  tools.filter(t => t.name === 'search-agent-by-keyword').forEach(tool => {
+    tool.result?.result?.forEach(item => {
+      map.set(item.agentId, item.agentName);
+    });
+  });
+  return map;
 }

package/package.json

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