From 062f7340e5fb51d4e810be2d29c242390bdbb638 Mon Sep 17 00:00:00 2001
From: williamhliu <137068196+williamhliu@users.noreply.github.com>
Date: Fri, 5 Jan 2024 10:17:17 +0800
Subject: [PATCH] (feature)(chat-sdk) add Few-shot examples (#599)

---
 .../src/components/ChatItem/SqlItem.tsx       | 48 ++++++++++++++++++-
 .../src/components/ChatItem/index.tsx         |  5 +-
 .../src/components/ChatItem/style.less        | 40 ++++++++++++++++
 3 files changed, 91 insertions(+), 2 deletions(-)

diff --git a/webapp/packages/chat-sdk/src/components/ChatItem/SqlItem.tsx b/webapp/packages/chat-sdk/src/components/ChatItem/SqlItem.tsx
index f11cde2cd..e3059ad4b 100644
--- a/webapp/packages/chat-sdk/src/components/ChatItem/SqlItem.tsx
+++ b/webapp/packages/chat-sdk/src/components/ChatItem/SqlItem.tsx
@@ -10,12 +10,13 @@ import { SqlInfoType } from '../../common/type';
 
 type Props = {
   llmReq?: any;
+  llmResp?: any;
   integrateSystem?: string;
   sqlInfo: SqlInfoType;
   sqlTimeCost?: number;
 };
 
-const SqlItem: React.FC<Props> = ({ llmReq, integrateSystem, sqlInfo, sqlTimeCost }) => {
+const SqlItem: React.FC<Props> = ({ llmReq, llmResp, integrateSystem, sqlInfo, sqlTimeCost }) => {
   const [sqlType, setSqlType] = useState('');
 
   const tipPrefixCls = `${PREFIX_CLS}-item`;
@@ -35,6 +36,8 @@ const SqlItem: React.FC<Props> = ({ llmReq, integrateSystem, sqlInfo, sqlTimeCos
 
   const { schema, linking, priorExts } = llmReq || {};
 
+  const fewShots = (Object.values(llmResp?.sqlRespMap || {})[0] as any)?.fewShots || [];
+
   return (
     <div className={`${tipPrefixCls}-parse-tip`}>
       <div className={`${tipPrefixCls}-title-bar`}>
@@ -64,6 +67,18 @@ const SqlItem: React.FC<Props> = ({ llmReq, integrateSystem, sqlInfo, sqlTimeCos
               Schema映射
             </div>
           )}
+          {fewShots.length > 0 && (
+            <div
+              className={`${tipPrefixCls}-content-option ${
+                sqlType === 'fewShots' ? `${tipPrefixCls}-content-option-active` : ''
+              }`}
+              onClick={() => {
+                setSqlType(sqlType === 'fewShots' ? '' : 'fewShots');
+              }}
+            >
+              Few-shot示例
+            </div>
+          )}
           {sqlInfo.s2SQL && (
             <div
               className={`${tipPrefixCls}-content-option ${
@@ -141,6 +156,37 @@ const SqlItem: React.FC<Props> = ({ llmReq, integrateSystem, sqlInfo, sqlTimeCos
             )}
           </div>
         )}
+        {sqlType === 'fewShots' && (
+          <div className={`${prefixCls}-code`}>
+            {fewShots.map((item: any, index: number) => {
+              return (
+                <div key={index} className={`${prefixCls}-few-shot-item`}>
+                  <div className={`${prefixCls}-few-shot-title`}>示例{index + 1}：</div>
+                  <div className={`${prefixCls}-few-shot-content`}>
+                    <div className={`${prefixCls}-few-shot-content-item`}>
+                      <div className={`${prefixCls}-few-shot-content-title`}>问题：</div>
+                      <div className={`${prefixCls}-few-shot-content-text`}>
+                        {item.questionAugmented}
+                      </div>
+                    </div>
+                    <div className={`${prefixCls}-few-shot-content-item`}>
+                      <div className={`${prefixCls}-few-shot-content-title`}>SQL：</div>
+                      <div className={`${prefixCls}-few-shot-content-text`}>
+                        <SyntaxHighlighter
+                          className={`${prefixCls}-few-shot-code`}
+                          language="sql"
+                          style={solarizedlight}
+                        >
+                          {item.sql}
+                        </SyntaxHighlighter>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )}
         {sqlType && sqlInfo[sqlType] && (
           <>
             <SyntaxHighlighter
diff --git a/webapp/packages/chat-sdk/src/components/ChatItem/index.tsx b/webapp/packages/chat-sdk/src/components/ChatItem/index.tsx
index c248f26df..f53c15581 100644
--- a/webapp/packages/chat-sdk/src/components/ChatItem/index.tsx
+++ b/webapp/packages/chat-sdk/src/components/ChatItem/index.tsx
@@ -308,6 +308,8 @@ const ChatItem: React.FC<Props> = ({
     [`${prefixCls}-content-mobile`]: isMobile,
   });
 
+  const { llmReq, llmResp } = parseInfo?.properties?.CONTEXT || {};
+
   return (
     <div className={prefixCls}>
       {!isMobile && integrateSystem !== 'wiki' && (
@@ -337,7 +339,8 @@ const ChatItem: React.FC<Props> = ({
             <>
               {!isMobile && parseInfo?.sqlInfo && isDeveloper && integrateSystem !== 'c2' && (
                 <SqlItem
-                  llmReq={parseInfo?.properties?.CONTEXT?.llmReq}
+                  llmReq={llmReq}
+                  llmResp={llmResp}
                   integrateSystem={integrateSystem}
                   sqlInfo={parseInfo.sqlInfo}
                   sqlTimeCost={parseTimeCost?.sqlTime}
diff --git a/webapp/packages/chat-sdk/src/components/ChatItem/style.less b/webapp/packages/chat-sdk/src/components/ChatItem/style.less
index 8ac3e2e1d..7567c104f 100644
--- a/webapp/packages/chat-sdk/src/components/ChatItem/style.less
+++ b/webapp/packages/chat-sdk/src/components/ChatItem/style.less
@@ -487,6 +487,46 @@
     flex: 1;
     color: var(--text-color);
   }
+
+  &-few-shot-item {
+    margin-top: 10px;
+
+    &:first-child {
+      margin-top: 4px;
+    }
+  }
+
+  &-few-shot-title {
+    color: var(--text-color);
+    font-weight: 500;
+  }
+
+  &-few-shot-content {
+    margin-top: 8px;
+    display: flex;
+    flex-direction: column;
+    row-gap: 2px;
+  }
+
+  &-few-shot-content-item {
+    display: flex;
+    align-items: baseline;
+  }
+
+  &-few-shot-content-title {
+    width: 50px;
+    color: var(--text-color);
+  }
+
+  &-few-shot-content-text {
+    line-height: 24px;
+    color: var(--text-color-secondary);
+  }
+
+  &-few-shot-code {
+    padding: 0 !important;
+    background-color: transparent !important;
+  }
 }
 
 .@{sql-item-prefix-cls}-copilot {