V4.12.0 features (#5435)

* add logs chart (#5352)

* charts

* chart data

* log chart

* delete

* rename api

* fix

* move api

* fix

* fix

* pro config

* fix

* feat: Repository interaction (#5356)

* feat: 1好像功能没问题了，明天再测

* feat: 2 解决了昨天遗留的bug,但全选按钮又bug了

* feat: 3 第三版，解决了全选功能bug

* feat: 4 第四版，下面改小细节

* feat: 5 我勒个痘

* feat: 6

* feat: 6 pr

* feat: 7

* feat: 8

* feat: 9

* feat: 10

* feat: 11

* feat: 12

* perf: checkbox ui

* refactor: tweak login loyout (#5357)

Co-authored-by: Archer <545436317@qq.com>

* login ui

* app chat log chart pro display (#5392)

* app chat log chart pro display

* add canopen props

* perf: pro tag tip

* perf: pro tag tip

* feat: openrouter provider (#5406)

* perf: login ui

* feat: openrouter provider

* provider

* perf: custom error throw

* perf: emb batch (#5407)

* perf: emb batch

* perf: vector retry

* doc

* doc (#5411)

* doc

* fix: team folder will add to workflow

* fix: generateToc shell

* Tool price (#5376)

* resolve conflicts for cherry-pick

* fix i18n

* Enhance system plugin template data structure and update ToolSelectModal to include CostTooltip component

* refactor: update systemKeyCost type to support array of objects in plugin and workflow types

* refactor: simplify systemKeyCost type across plugin and workflow types to a single number

* refactor: streamline systemKeyCost handling in plugin and workflow components

* fix

* fix

* perf: toolset price config;fix: workflow array selector ui (#5419)

* fix: workflow array selector ui

* update default model tip

* perf: toolset price config

* doc

* fix: test

* Refactor/chat (#5418)

* refactor: add homepage configuration; add home chat page; add side bar animated collapse and layout

* fix: fix lint rules

* chore: improve logics and code

* chore: more clearer logics

* chore: adjust api

---------

Co-authored-by: Archer <545436317@qq.com>

* perf: chat setting code

* del history

* logo image

* perf: home chat ui

* feat: enhance chat response handling with external links and user info (#5427)

* feat: enhance chat response handling with external links and user info

* fix

* cite code

* perf: toolset add in workflow

* fix: test

* fix: search paraentId

* Fix/chat (#5434)

* wip: rebase了upstream

* wip: adapt mobile UI

* fix: fix chat page logic and UI

* fix: fix UI and improve some logics

* fix: model selector missing logo; vision model to retrieve file

* perf: role selector

* fix: chat ui

* optimize export app chat log (#5436)

* doc

* chore: move components to proper directory; fix the api to get app list (#5437)

* chore: improve team app panel display form (#5438)

* feat: add home chat log tab

* chore: improve team app panel display form

* chore: improve log panel

* fix: spec

* doc

* fix: log permission

* fix: dataset schema required

* add loading status

* remove ui weight

* manage log

* fix: log detail per

* doc

* fix: log menu

* rename permission

* bg color

* fix: app log per

* fix: log key selector

* fix: log

* doc

---------

Co-authored-by: heheer <zhiyu44@qq.com>
Co-authored-by: colnii <1286949794@qq.com>
Co-authored-by: 伍闲犬 <76519998+xqvvu@users.noreply.github.com>
Co-authored-by: Ctrlz <143257420+ctrlz526@users.noreply.github.com>
Co-authored-by: 伍闲犬 <whoeverimf5@gmail.com>
Co-authored-by: heheer <heheer@sealos.io>

packages/web/components/common/charts/LineChartComponent.tsx

@@ -1,20 +1,20 @@
-import React, { useCallback, useMemo, useState } from 'react';
-import { Box, HStack, useTheme } from '@chakra-ui/react';
+import React, { useCallback, useMemo } from 'react';
+import { Box, Flex, HStack, useTheme } from '@chakra-ui/react';
 import {
   ResponsiveContainer,
-  AreaChart,
-  Area,
   XAxis,
   YAxis,
   CartesianGrid,
   Tooltip,
-  type TooltipProps
+  type TooltipProps,
+  LineChart,
+  Line,
+  ReferenceLine
 } from 'recharts';
 import { type NameType, type ValueType } from 'recharts/types/component/DefaultTooltipContent';
 import { formatNumber } from '@fastgpt/global/common/math/tools';
-import FillRowTabs from '../Tabs/FillRowTabs';
 import { useTranslation } from 'next-i18next';
-import { cloneDeep } from 'lodash';
+import QuestionTip from '../MyTooltip/QuestionTip';
 
 type LineConfig = {
   dataKey: string;
@@ -34,15 +34,13 @@ type TooltipItem = {
 type LineChartComponentProps = {
   data: Record<string, any>[];
   title: string;
-  HeaderLeftChildren?: React.ReactNode;
+  description?: string;
+  HeaderRightChildren?: React.ReactNode;
   lines: LineConfig[];
   tooltipItems?: TooltipItem[];
-
-  defaultDisplayMode?: 'incremental' | 'cumulative';
-  enableIncremental?: boolean;
-  enableCumulative?: boolean;
-  enableTooltip?: boolean;
-  startDateValue?: number;
+  showAverage?: boolean;
+  averageKey?: string;
+  blur?: boolean;
 };
 
 const CustomTooltip = ({
@@ -57,8 +55,15 @@ const CustomTooltip = ({
   }
 
   return (
-    <Box bg="white" p={3} borderRadius="md" border="base" boxShadow="sm">
-      <Box fontSize="sm" color="myGray.900" mb={2}>
+    <Box
+      bg="white"
+      p={3}
+      borderRadius="md"
+      border="base"
+      boxShadow="sm"
+      {...(tooltipItems.length > 8 ? { position: 'relative', top: '-30px' } : {})}
+    >
+      <Box fontSize="sm" color="myGray.900" mb={tooltipItems.length > 5 ? 1 : 2}>
         {data.xLabel || data.x}
       </Box>
       {tooltipItems.map((item, index) => {
@@ -66,7 +71,7 @@ const CustomTooltip = ({
         const displayValue = item.formatter ? item.formatter(value) : formatNumber(value);
 
         return (
-          <HStack key={index} fontSize="sm" _notLast={{ mb: 1 }}>
+          <HStack key={index} fontSize="sm" _notLast={{ mb: tooltipItems.length > 5 ? 0 : 1 }}>
             <Box w={2} h={2} borderRadius="full" bg={item.color} />
             <Box>{item.label}</Box>
             <Box>{displayValue.toLocaleString()}</Box>
@@ -80,30 +85,15 @@ const CustomTooltip = ({
 const LineChartComponent = ({
   data,
   title,
-  HeaderLeftChildren,
+  description,
+  HeaderRightChildren,
   lines,
   tooltipItems,
-  defaultDisplayMode = 'incremental',
-  enableIncremental = true,
-  enableCumulative = true,
-  startDateValue = 0
+  showAverage = false,
+  averageKey,
+  blur = false
 }: LineChartComponentProps) => {
   const theme = useTheme();
-  const { t } = useTranslation();
-  const [displayMode, setDisplayMode] = useState<'incremental' | 'cumulative'>(defaultDisplayMode);
-
-  // Tab list constant
-  const tabList = useMemo(
-    () => [
-      ...(enableIncremental
-        ? [{ label: t('common:chart_mode_incremental'), value: 'incremental' as const }]
-        : []),
-      ...(enableCumulative
-        ? [{ label: t('common:chart_mode_cumulative'), value: 'cumulative' as const }]
-        : [])
-    ],
-    [enableCumulative, enableIncremental, t]
-  );
 
   // Y-axis number formatter function
   const formatYAxisNumber = useCallback((value: number): string => {
@@ -115,32 +105,13 @@ const LineChartComponent = ({
     return value.toString();
   }, []);
 
-  // Process data based on display mode
-  const processedData = useMemo(() => {
-    if (displayMode === 'incremental') {
-      return data;
-    }
+  // Calculate average value
+  const averageValue = useMemo(() => {
+    if (!showAverage || !averageKey || data.length === 0) return null;
 
-    // Cumulative mode: accumulate values for each line's dataKey
-    const cloneData = cloneDeep(data);
-
-    const dataKeys = lines.map((item) => item.dataKey);
-
-    return cloneData.map((item, index) => {
-      if (index === 0) {
-        item[dataKeys[0]] = startDateValue + item[dataKeys[0]];
-        return item;
-      }
-
-      dataKeys.forEach((key) => {
-        if (typeof item[key] === 'number') {
-          item[key] += cloneData[index - 1][key];
-        }
-      });
-
-      return item;
-    });
-  }, [displayMode, data, lines, startDateValue]);
+    const sum = data.reduce((acc, item) => acc + (item[averageKey] || 0), 0);
+    return sum / data.length;
+  }, [showAverage, averageKey, data]);
 
   // Generate gradient definitions
   const gradientDefs = useMemo(
@@ -165,28 +136,49 @@ const LineChartComponent = ({
   );
 
   return (
-    <>
-      <HStack mb={4} justifyContent={'space-between'} alignItems={'flex-start'}>
-        <Box fontSize={'sm'} color={'myGray.900'} fontWeight={'medium'}>
-          {title}
+    <Box
+      onMouseEnter={(e) => {
+        const chartElement = e.currentTarget.querySelector('.recharts-wrapper');
+        if (chartElement && showAverage && averageValue !== null) {
+          chartElement.classList.add('show-average');
+        }
+      }}
+      onMouseLeave={(e) => {
+        const chartElement = e.currentTarget.querySelector('.recharts-wrapper');
+        if (chartElement) {
+          chartElement.classList.remove('show-average');
+        }
+      }}
+      h="100%"
+    >
+      <style jsx global>{`
+        .recharts-wrapper .average-line {
+          opacity: 0;
+          transition: opacity 0.2s ease-in-out;
+        }
+        .recharts-wrapper.show-average .average-line {
+          opacity: 1;
+        }
+      `}</style>
+      <Flex mb={4} h={6}>
+        <Flex flex={1} alignItems={'center'} gap={1}>
+          <Box fontSize={'sm'} color={'myGray.900'} fontWeight={'medium'}>
+            {title}
+          </Box>
+          <QuestionTip label={description} />
+        </Flex>
+        <Box filter={blur ? 'blur(7.5px)' : 'none'} pointerEvents={blur ? 'none' : 'auto'}>
+          {HeaderRightChildren}
         </Box>
-        <HStack spacing={2}>
-          {HeaderLeftChildren}
-          {tabList.length > 1 && (
-            <FillRowTabs<'incremental' | 'cumulative'>
-              list={tabList}
-              py={0.5}
-              px={2}
-              value={displayMode}
-              onChange={setDisplayMode}
-            />
-          )}
-        </HStack>
-      </HStack>
-      <ResponsiveContainer width="100%" height={'100%'}>
-        <AreaChart
-          data={processedData}
-          margin={{ top: 5, right: 30, left: 0, bottom: HeaderLeftChildren ? 20 : 15 }}
+      </Flex>
+      <ResponsiveContainer
+        width="100%"
+        height={'100%'}
+        style={{ filter: blur ? 'blur(7.5px)' : 'none' }}
+      >
+        <LineChart
+          data={data}
+          margin={{ top: 5, right: 30, left: 0, bottom: HeaderRightChildren ? 20 : 15 }}
         >
           {gradientDefs}
           <XAxis
@@ -206,9 +198,8 @@ const LineChartComponent = ({
           <CartesianGrid strokeDasharray="3 3" horizontal={true} vertical={false} />
           {tooltipItems && <Tooltip content={<CustomTooltip tooltipItems={tooltipItems} />} />}
           {lines.map((line, index) => (
-            <Area
+            <Line
               key={line.dataKey}
-              type="monotone"
               name={line.name}
               dataKey={line.dataKey}
               stroke={line.color}
@@ -217,9 +208,24 @@ const LineChartComponent = ({
               dot={false}
             />
           ))}
-        </AreaChart>
+          {showAverage && averageValue !== null && (
+            <ReferenceLine
+              y={averageValue}
+              stroke={theme.colors.primary?.['400']}
+              strokeDasharray="5 5"
+              strokeWidth={1}
+              className="average-line"
+              label={{
+                value: `${formatNumber(averageValue)}`,
+                position: 'insideTopRight',
+                fill: theme.colors.primary?.['400'],
+                fontSize: 12
+              }}
+            />
+          )}
+        </LineChart>
       </ResponsiveContainer>
-    </>
+    </Box>
   );
 };