@nethru/kit 1.0.6 → 1.1.0

package/dist/components/charts/PieChart.js

@@ -0,0 +1,168 @@
+import React, { useMemo } from 'react';
+import Highcharts from 'highcharts';
+import HighchartsReactModule from 'highcharts-react-official';
+import 'highcharts/modules/pattern-fill.js';
+
+// Handle both ES module and CommonJS exports
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const HighchartsReact = HighchartsReactModule.default || HighchartsReactModule;
+const PieChart = ({
+  data,
+  width = 230,
+  height = 180,
+  size = '60%',
+  colors = ['#2652a8', '#b47813', '#aa1a32']
+}) => {
+  const noData = data.metrics.some(m => m.transparent);
+  const options = useMemo(() => {
+    const chartData = data.metrics.filter(metric => metric.transparent || metric.value > 0).map((metric, index) => ({
+      name: metric.label,
+      y: metric.value,
+      color: metric.transparent ? checkerboardPattern() : colors[index % colors.length]
+    }));
+    return {
+      chart: {
+        type: 'pie',
+        backgroundColor: 'transparent',
+        width: width,
+        height: height,
+        style: {
+          fontFamily: fontFamily
+        }
+      },
+      title: {
+        text: undefined
+      },
+      tooltip: {
+        pointFormat: '<span><b>{point.y}</b> ({point.percentage:.1f}%)</span>',
+        style: {
+          fontFamily: fontFamily,
+          fontSize: '13px'
+        },
+        useHTML: true
+      },
+      plotOptions: {
+        pie: {
+          size: size,
+          allowPointSelect: true,
+          cursor: 'pointer',
+          dataLabels: {
+            enabled: true,
+            format: '{point.name}<br><b>{point.y}</b> ({point.percentage:.1f}%)',
+            distance: 20,
+            style: {
+              fontSize: '13px',
+              fontWeight: '100',
+              textOutline: 'none',
+              fontFamily: fontFamily
+            },
+            connectorColor: '#666',
+            connectorWidth: 1,
+            overflow: 'allow',
+            crop: false
+          },
+          showInLegend: false
+        }
+      },
+      series: [{
+        type: 'pie',
+        name: '',
+        colorByPoint: true,
+        data: chartData
+      }],
+      credits: {
+        enabled: false
+      },
+      accessibility: {
+        enabled: false
+      }
+    };
+  }, [data, width, height, size, colors]);
+  return /*#__PURE__*/_jsxs("div", {
+    style: styles.chartWrapper,
+    children: [/*#__PURE__*/_jsxs("div", {
+      style: {
+        ...styles.chartContainer,
+        width,
+        height,
+        position: 'relative'
+      },
+      children: [noData && /*#__PURE__*/_jsx(CheckerboardBackground, {
+        width: width,
+        height: height
+      }), /*#__PURE__*/_jsx("div", {
+        style: {
+          position: 'relative',
+          zIndex: 1
+        },
+        children: /*#__PURE__*/_jsx(HighchartsReact, {
+          highcharts: Highcharts,
+          options: options
+        })
+      })]
+    }), /*#__PURE__*/_jsx("div", {
+      style: styles.agentName,
+      children: data.name
+    })]
+  });
+};
+export default PieChart;
+const fontFamily = 'Pretendard, -apple-system, BlinkMacSystemFont, sans-serif';
+const styles = {
+  chartWrapper: {
+    background: 'transparent',
+    textAlign: 'center',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  chartContainer: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  agentName: {
+    fontSize: '12px',
+    fontWeight: '100',
+    marginTop: '-30px',
+    color: '#333'
+  }
+};
+const CheckerboardBackground = ({
+  width,
+  height
+}) => {
+  const circleSize = Math.min(width, height) * 0.47;
+  return /*#__PURE__*/_jsx("div", {
+    style: {
+      position: 'absolute',
+      width: circleSize,
+      height: circleSize,
+      borderRadius: '50%',
+      backgroundImage: `
+                linear-gradient(45deg, #e0e0e0 25%, transparent 25%),
+                linear-gradient(-45deg, #e0e0e0 25%, transparent 25%),
+                linear-gradient(45deg, transparent 75%, #e0e0e0 75%),
+                linear-gradient(-45deg, transparent 75%, #e0e0e0 75%)
+              `,
+      backgroundSize: '10px 10px',
+      backgroundPosition: '0 0, 0 5px, 5px -5px, -5px 0px',
+      backgroundColor: '#ffffff',
+      zIndex: 0
+    }
+  });
+};
+const checkerboardPattern = () => ({
+  pattern: {
+    path: {
+      d: 'M 0 0 L 5 5 M 4.5 -0.5 L 5.5 0.5 M -0.5 4.5 L 0.5 5.5',
+      stroke: '#d0d0d0',
+      strokeWidth: 1
+    },
+    width: 5,
+    height: 5,
+    backgroundColor: '#ffffff',
+    opacity: 1
+  }
+});

package/dist/components/charts/StackedAreaTrendChart.js

@@ -0,0 +1,52 @@
+import React, { useMemo } from "react";
+import TrendChart from "./TrendChart";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function StackedAreaTrendChart({
+  metrics,
+  records,
+  isDaily = false,
+  xPlotIndex,
+  xAxisTickInterval,
+  yAxisLabelEnabled = false,
+  legendLimit = 3,
+  colors = defaultColors,
+  ...props
+}) {
+  const _metrics = useMemo(() => {
+    return metrics.map(m => ({
+      metric: m.id,
+      chartType: 'area'
+    }));
+  }, [metrics]);
+  const metas = useMemo(() => {
+    const result = {
+      time: {
+        name: "일시",
+        type: "DATE"
+      }
+    };
+    metrics.forEach(m => {
+      result[m.id] = {
+        name: m.name,
+        type: "NUMBER"
+      };
+    });
+    return result;
+  }, [metrics]);
+  return /*#__PURE__*/_jsx(TrendChart, {
+    dimension: "time",
+    stacking: "normal",
+    metrics: _metrics,
+    metas: metas,
+    records: records,
+    isRealtime: xPlotIndex !== undefined,
+    isDaily: isDaily,
+    xPlotIndex: xPlotIndex,
+    xAxisTickInterval: xAxisTickInterval,
+    yAxisLabelEnabled: yAxisLabelEnabled,
+    legendLimit: legendLimit,
+    colors: colors,
+    ...props
+  });
+}
+const defaultColors = [["rgba(54,115,237,0.8)", "#3673ed"], ["rgba(149,77,241,0.8)", "#954df1"], ["#4dc391", "#20b476"], ["#fbba3d", "#faa90c"], ["#f2426d", "#ef1348"]];

package/dist/components/charts/TrendChart.js

@@ -0,0 +1,30 @@
+import React, { useMemo } from "react";
+import Chart from "./Chart";
+import * as ChartColors from "./ChartColors";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function TrendChart({
+  colorIndex = 0,
+  legendColors,
+  isDaily,
+  isRealtime,
+  ...props
+}) {
+  const colors = useMemo(() => {
+    return ChartColors.all[colorIndex % ChartColors.all.length];
+  }, [colorIndex]);
+  const tooltip = useMemo(() => ({
+    dateFormat: isRealtime ? '%H:%M' : '%Y-%m-%d',
+    headerTime: !isDaily && !isRealtime,
+    outside: props.tooltipOutSide,
+    legendColors
+  }), [isRealtime, isDaily, props.tooltipOutSide, legendColors]);
+  return /*#__PURE__*/_jsx(Chart, {
+    type: "areaspline",
+    categorize: true,
+    xAxisType: "datetime",
+    xAxisLabelFormat: isDaily ? '%m-%d' : '%H:%M',
+    colors: colors,
+    tooltip: tooltip,
+    ...props
+  });
+}

package/dist/components/chat/AiChat.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Stack } from "@mui/material";
+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 {
+    messages,
+    inputValue,
+    setInputValue,
+    isLoading,
+    chatContainerRef,
+    sendMessage
+  } = useChatApi(defaultMessages);
+  return /*#__PURE__*/_jsxs(Stack, {
+    sx: {
+      ...styles.container,
+      ...sx
+    },
+    children: [/*#__PURE__*/_jsx(ChatMessages, {
+      messages: messages,
+      isLoading: isLoading,
+      chatContainerRef: chatContainerRef
+    }), /*#__PURE__*/_jsx(ChatInput, {
+      inputValue: inputValue,
+      setInputValue: setInputValue,
+      onSend: sendMessage,
+      isLoading: isLoading
+    })]
+  });
+}
+export default AiChat;
+const styles = {
+  container: {
+    width: '100%',
+    height: '90vh',
+    background: 'white',
+    display: 'flex',
+    flexDirection: 'column',
+    overflow: 'hidden'
+  }
+};

package/dist/components/chat/ChatInput.js

@@ -0,0 +1,112 @@
+import React from 'react';
+import { Box, FormControl, IconButton, MenuItem, Select, Stack, TextField } from '@mui/material';
+import { Send as SendIcon } from '@mui/icons-material';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ChatInput = ({
+  inputValue,
+  setInputValue,
+  onSend,
+  isLoading
+}) => {
+  const [model, setModel] = React.useState('GPT_4_1_MINI');
+  const handleKeyPress = e => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      onSend();
+    }
+  };
+  return /*#__PURE__*/_jsx(Box, {
+    sx: styles.container,
+    children: /*#__PURE__*/_jsxs(Stack, {
+      sx: styles.textArea,
+      children: [/*#__PURE__*/_jsx(TextField, {
+        fullWidth: true,
+        multiline: true,
+        placeholder: "\uBA54\uC2DC\uC9C0\uB97C \uC785\uB825\uD558\uC138\uC694...",
+        value: inputValue,
+        onChange: e => setInputValue(e.target.value),
+        onKeyUp: handleKeyPress,
+        disabled: isLoading,
+        variant: "standard",
+        slotProps: {
+          input: {
+            disableUnderline: true,
+            sx: styles.textField
+          }
+        }
+      }), /*#__PURE__*/_jsxs(Stack, {
+        direction: "row",
+        gap: 2,
+        justifyContent: "flex-end",
+        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"
+            })]
+          })
+        }), /*#__PURE__*/_jsx(IconButton, {
+          onClick: onSend,
+          disabled: isLoading || !inputValue.trim(),
+          sx: styles.iconButton,
+          children: /*#__PURE__*/_jsx(SendIcon, {
+            sx: {
+              fontSize: 18
+            }
+          })
+        })]
+      })]
+    })
+  });
+};
+export default ChatInput;
+const styles = {
+  container: {
+    background: '#f5f5f5',
+    padding: '20px',
+    borderTop: '1px solid #e5e7eb'
+  },
+  textArea: {
+    border: '1px solid #dfdfdf',
+    background: '#fff',
+    borderRadius: '12px',
+    padding: '4px 12px',
+    transition: 'all 0.2s ease-in-out'
+  },
+  textField: {
+    fontSize: '14px',
+    padding: '8px 4px',
+    lineHeight: '1.4',
+    transition: 'all 0.2s ease-in-out',
+    '& textarea': {
+      transition: 'height 0.2s ease-in-out !important'
+    }
+  },
+  iconButton: {
+    background: '#000',
+    color: 'white',
+    width: 30,
+    height: 30,
+    paddingLeft: '12px',
+    transition: 'background-color 0.3s ease',
+    '&:hover': {
+      background: '#333'
+    },
+    '&:disabled': {
+      background: '#e0e0e0',
+      color: '#9e9e9e'
+    }
+  }
+};

package/dist/components/chat/ChatMessage.js

@@ -0,0 +1,76 @@
+import React, { useMemo } from 'react';
+import { Box, keyframes } from '@mui/material';
+import MarkdownContent from "./content/MarkdownContent";
+import ToolContent from "./content/ToolContent";
+import { ToolContextProvider } from "./contexts/ToolContext";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const slideIn = keyframes`
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+`;
+const ChatMessage = ({
+  message
+}) => {
+  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
+      })
+    }, index))]
+  });
+};
+export default ChatMessage;
+const styles = {
+  messageUser: {
+    maxWidth: '75%',
+    padding: '5px 10px',
+    borderRadius: '12px',
+    wordWrap: 'break-word',
+    fontSize: '13px',
+    animation: `${slideIn} 0.3s ease`,
+    color: '#333',
+    background: '#ecedee',
+    alignSelf: 'flex-end',
+    marginLeft: 'auto',
+    '& .content-tool': {
+      background: 'rgba(255, 255, 255, 0.2)',
+      borderLeftColor: 'rgba(255, 255, 255, 0.5)'
+    },
+    '& .tool-header': {
+      color: 'rgba(255, 255, 255, 0.95)'
+    },
+    '& .tool-result': {
+      background: 'rgba(255, 255, 255, 0.15)',
+      color: 'rgba(255, 255, 255, 0.9)'
+    }
+  },
+  messageAssistant: {
+    width: '100%',
+    maxWidth: '100%',
+    padding: '1rem 1.25rem',
+    borderRadius: '1.25rem',
+    wordWrap: 'break-word',
+    fontSize: '13px',
+    animation: `${slideIn} 0.3s ease`,
+    color: '#333',
+    alignSelf: 'flex-start'
+  },
+  contentItem: {
+    marginBottom: '0.5rem',
+    '&:last-child': {
+      marginBottom: 0
+    }
+  }
+};

package/dist/components/chat/ChatMessages.js

@@ -0,0 +1,34 @@
+import React, { useEffect } from 'react';
+import ChatMessage from './ChatMessage';
+import LoadingIndicator from './LoadingIndicator';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ChatMessages = ({
+  messages,
+  isLoading,
+  chatContainerRef
+}) => {
+  useEffect(() => {
+    if (messages.length === 0) return;
+    const message = messages[messages.length - 1];
+    if (message.role === 'assistant') console.log(message);
+  }, [messages.length]);
+  return /*#__PURE__*/_jsxs("div", {
+    style: styles.container,
+    ref: chatContainerRef,
+    children: [messages.map((message, index) => /*#__PURE__*/_jsx(ChatMessage, {
+      message: message
+    }, index)), isLoading && /*#__PURE__*/_jsx(LoadingIndicator, {})]
+  });
+};
+export default ChatMessages;
+const styles = {
+  container: {
+    flex: 1,
+    overflowY: 'auto',
+    padding: '1.5rem',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '1rem',
+    background: '#fcfcfd'
+  }
+};

package/dist/components/chat/LoadingIndicator.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Box, keyframes } from '@mui/material';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const bounce = keyframes`
+    0%, 60%, 100% {
+        transform: translateY(0);
+    }
+    30% {
+        transform: translateY(-10px);
+    }
+`;
+const LoadingIndicator = () => {
+  return /*#__PURE__*/_jsxs(Box, {
+    sx: styles.typing,
+    children: [/*#__PURE__*/_jsx(Box, {
+      component: "span",
+      sx: styles.dot
+    }), /*#__PURE__*/_jsx(Box, {
+      component: "span",
+      sx: {
+        ...styles.dot,
+        animationDelay: '0.2s'
+      }
+    }), /*#__PURE__*/_jsx(Box, {
+      component: "span",
+      sx: {
+        ...styles.dot,
+        animationDelay: '0.4s'
+      }
+    })]
+  });
+};
+export default LoadingIndicator;
+const styles = {
+  typing: {
+    display: 'inline-block',
+    padding: '1rem 1.25rem'
+  },
+  dot: {
+    display: 'inline-block',
+    width: '6px',
+    height: '6px',
+    borderRadius: '50%',
+    background: '#666',
+    margin: '0 2px',
+    animation: `${bounce} 1.4s infinite`
+  }
+};