V4.8.17 feature (#3493)

* split tokens into input and output (#3477)

* split tokens into input and output

* query extension & tool call & question guide

* fix

* perf: input and output tokens

* perf: tool call if else

* perf: remove code

* fix: extract usage count

* fix: qa usage count

---------

Co-authored-by: heheer <heheer@sealos.io>

projects/app/src/components/core/ai/AISettingModal/index.tsx

@@ -18,7 +18,6 @@ import {
   Thead,
   Tr,
   Table,
-  useDisclosure,
   FlexProps
 } from '@chakra-ui/react';
 import { useSystemStore } from '@/web/common/system/useSystemStore';
@@ -175,10 +174,28 @@ const AIChatSettingsModal = ({
             <Tbody>
               <Tr color={'myGray.900'}>
                 <Td pt={0} pb={2}>
-                  {t('common:support.wallet.Ai point every thousand tokens', {
-                    points: selectedModel?.charsPointsPrice || 0
-                  })}
+                  {typeof selectedModel?.inputPrice === 'number' ? (
+                    <>
+                      <Box>
+                        {t('common:support.wallet.Ai point every thousand tokens_input', {
+                          points: selectedModel?.inputPrice || 0
+                        })}
+                      </Box>
+                      <Box>
+                        {t('common:support.wallet.Ai point every thousand tokens_output', {
+                          points: selectedModel?.outputPrice || 0
+                        })}
+                      </Box>
+                    </>
+                  ) : (
+                    <>
+                      {t('common:support.wallet.Ai point every thousand tokens', {
+                        points: selectedModel?.charsPointsPrice || 0
+                      })}
+                    </>
+                  )}
                 </Td>
+
                 <Td pt={0} pb={2}>
                   {Math.round((selectedModel?.maxContext || 4096) / 1000)}K
                 </Td>

projects/app/src/components/core/ai/ModelTable/index.tsx

@@ -60,14 +60,32 @@ const ModelTable = () => {
     const formatLLMModelList = llmModelList.map((item) => ({
       ...item,
       typeLabel: t('common:model.type.chat'),
-      priceLabel: (
-        <Flex color={'myGray.700'}>
-          <Box fontWeight={'bold'} color={'myGray.900'} mr={0.5}>
-            {item.charsPointsPrice}
+      priceLabel:
+        typeof item.inputPrice === 'number' ? (
+          <Box>
+            <Flex>
+              {`${t('common:common.Input')}:`}
+              <Box fontWeight={'bold'} color={'myGray.900'} mr={0.5} ml={2}>
+                {item.inputPrice || 0}
+              </Box>
+              {`${t('common:support.wallet.subscription.point')} / 1K Tokens`}
+            </Flex>
+            <Flex>
+              {`${t('common:common.Output')}:`}
+              <Box fontWeight={'bold'} color={'myGray.900'} mr={0.5} ml={2}>
+                {item.outputPrice || 0}
+              </Box>
+              {`${t('common:support.wallet.subscription.point')} / 1K Tokens`}
+            </Flex>
           </Box>
-          {`${t('common:support.wallet.subscription.point')} / 1K Tokens`}
-        </Flex>
-      ),
+        ) : (
+          <Flex color={'myGray.700'}>
+            <Box fontWeight={'bold'} color={'myGray.900'} mr={0.5}>
+              {item.charsPointsPrice}
+            </Box>
+            {`${t('common:support.wallet.subscription.point')} / 1K Tokens`}
+          </Flex>
+        ),
       tagColor: 'blue'
     }));
     const formatVectorModelList = vectorModelList.map((item) => ({
@@ -149,13 +167,13 @@ const ModelTable = () => {
 
     return filterList;
   }, [
-    provider,
-    modelType,
     llmModelList,
     vectorModelList,
     audioSpeechModelList,
     whisperModel,
     t,
+    modelType,
+    provider,
     search
   ]);
 

projects/app/src/components/core/chat/components/WholeResponseModal.tsx

@@ -155,10 +155,26 @@ export const WholeResponseContent = ({
           label={t('common:core.chat.response.module tokens')}
           value={`${activeModule?.tokens}`}
         />
+        <Row
+          label={t('common:core.chat.response.module input tokens')}
+          value={`${activeModule?.inputTokens}`}
+        />
+        <Row
+          label={t('common:core.chat.response.module output tokens')}
+          value={`${activeModule?.outputTokens}`}
+        />
         <Row
           label={t('common:core.chat.response.Tool call tokens')}
           value={`${activeModule?.toolCallTokens}`}
         />
+        <Row
+          label={t('common:core.chat.response.Tool call input tokens')}
+          value={`${activeModule?.toolCallInputTokens}`}
+        />
+        <Row
+          label={t('common:core.chat.response.Tool call output tokens')}
+          value={`${activeModule?.toolCallOutputTokens}`}
+        />
 
         <Row label={t('common:core.chat.response.module query')} value={activeModule?.query} />
         <Row