feat(wren-ui): add adjust the answer dropdown for answer tab

wren-ui/src/components/diagram/CustomDropdown.tsx

@@ -6,6 +6,8 @@ import EditOutlined from '@ant-design/icons/EditOutlined';
 import ReloadOutlined from '@ant-design/icons/ReloadOutlined';
 import EyeInvisibleOutlined from '@ant-design/icons/EyeInvisibleOutlined';
 import EyeOutlined from '@ant-design/icons/EyeOutlined';
+import CodeFilled from '@ant-design/icons/CodeFilled';
+import { EditSVG } from '@/utils/svgs';
 import {
   DeleteCalculatedFieldModal,
   DeleteRelationshipModal,
@@ -21,11 +23,12 @@ interface Props {
   onMoreClick: (type: MORE_ACTION) => void;
   onMenuEnter?: (event: React.MouseEvent) => void;
   children: React.ReactNode;
+  onDropdownVisibleChange?: (visible: boolean) => void;
 }
 
 const makeDropdown =
   (getItems: (props: Props) => ItemType[]) => (props: Props) => {
-    const { children, onMenuEnter } = props;
+    const { children, onMenuEnter, onDropdownVisibleChange } = props;
 
     const items = getItems(props);
 
@@ -40,6 +43,7 @@ const makeDropdown =
             onMouseEnter={onMenuEnter}
           />
         }
+        onVisibleChange={onDropdownVisibleChange}
       >
         {children}
       </Dropdown>
@@ -281,3 +285,38 @@ export const InstructionDropdown = makeDropdown(
     return items;
   },
 );
+
+export const AdjustAnswerDropdown = makeDropdown(
+  (
+    props: Props & {
+      onMoreClick: (payload: { type: MORE_ACTION; data: any }) => void;
+    },
+  ) => {
+    const { onMoreClick, data } = props;
+    const items: ItemType[] = [
+      {
+        label: 'Adjust steps',
+        className: 'gray-8',
+        icon: <EditSVG className="gray-8" />,
+        key: 'adjust-steps',
+        onClick: () =>
+          onMoreClick({
+            type: MORE_ACTION.ADJUST_STEPS,
+            data,
+          }),
+      },
+      {
+        label: 'Adjust SQL',
+        className: 'gray-8',
+        icon: <CodeFilled className="gray-8 text-base" />,
+        key: 'adjust-sql',
+        onClick: () =>
+          onMoreClick({
+            type: MORE_ACTION.ADJUST_SQL,
+            data,
+          }),
+      },
+    ];
+    return items;
+  },
+);

wren-ui/src/components/pages/home/promptThread/TextBasedAnswer.tsx

@@ -2,14 +2,19 @@ import { useEffect, useMemo, useState } from 'react';
 import { Alert, Button, Skeleton, Typography } from 'antd';
 import ReloadOutlined from '@ant-design/icons/ReloadOutlined';
 import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
+import CaretDownOutlined from '@ant-design/icons/CaretDownOutlined';
+import EditOutlined from '@ant-design/icons/EditOutlined';
 import styled from 'styled-components';
 import { BinocularsIcon } from '@/utils/icons';
 import { nextTick } from '@/utils/time';
+import { MORE_ACTION } from '@/utils/enum';
 import usePromptThreadStore from './store';
+import useDropdown from '@/hooks/useDropdown';
 import useTextBasedAnswerStreamTask from '@/hooks/useTextBasedAnswerStreamTask';
 import { Props as AnswerResultProps } from '@/components/pages/home/promptThread/AnswerResult';
 import MarkdownBlock from '@/components/editor/MarkdownBlock';
 import PreviewData from '@/components/dataPreview/PreviewData';
+import { AdjustAnswerDropdown } from '@/components/diagram/CustomDropdown';
 import { usePreviewDataMutation } from '@/apollo/client/graphql/home.generated';
 import { ThreadResponseAnswerStatus } from '@/apollo/client/graphql/__types__';
 
@@ -41,6 +46,7 @@ export default function TextBasedAnswer(props: AnswerResultProps) {
     threadResponse?.answerDetail || {};
 
   const [textAnswer, setTextAnswer] = useState<string>('');
+  const adjustResultsDropdown = useDropdown();
 
   const [fetchAnswerStreamingTask, answerStreamTaskResult] =
     useTextBasedAnswerStreamTask();
@@ -110,6 +116,17 @@ export default function TextBasedAnswer(props: AnswerResultProps) {
     onGenerateTextBasedAnswer(id);
   };
 
+  const onMoreClick = async (payload) => {
+    const { type, data } = payload;
+    if (type === MORE_ACTION.ADJUST_STEPS) {
+      // TODO: open adjust steps modal
+      console.log('adjust steps', data);
+    } else if (type === MORE_ACTION.ADJUST_SQL) {
+      // TODO: open adjust sql modal
+      console.log('adjust sql', data);
+    }
+  };
+
   if (error) {
     return (
       <Alert
@@ -130,6 +147,26 @@ export default function TextBasedAnswer(props: AnswerResultProps) {
       title={false}
     >
       <div className="text-md gray-10 p-4 pr-6">
+        <div className="text-right">
+          <AdjustAnswerDropdown
+            onMoreClick={onMoreClick}
+            data={{ sql: threadResponse.sql }}
+            onDropdownVisibleChange={adjustResultsDropdown.onVisibleChange}
+          >
+            <Button
+              type="link"
+              size="small"
+              icon={<EditOutlined />}
+              onClick={(event) => event.stopPropagation()}
+            >
+              Adjust the answer
+              <CaretDownOutlined
+                className="ml-1"
+                rotate={adjustResultsDropdown.visible ? 180 : 0}
+              />
+            </Button>
+          </AdjustAnswerDropdown>
+        </div>
         <MarkdownBlock content={textAnswer} />
         {isStreaming && <LoadingOutlined className="geekblue-6" spin />}
         {status === ThreadResponseAnswerStatus.INTERRUPTED && (

wren-ui/src/hooks/useDropdown.tsx

@@ -0,0 +1,15 @@
+import { useState } from 'react';
+
+export default function useDropdown() {
+  const [visible, setVisible] = useState<boolean>(false);
+
+  const onVisibleChange = (visible: boolean) => setVisible(visible);
+
+  const onCloseDropdownMenu = () => setVisible(false);
+
+  return {
+    visible,
+    onVisibleChange,
+    onCloseDropdownMenu,
+  };
+}

wren-ui/src/utils/enum/dropdown.ts

@@ -0,0 +1,11 @@
+export enum MORE_ACTION {
+  EDIT = 'edit',
+  DELETE = 'delete',
+  UPDATE_COLUMNS = 'update_columns',
+  REFRESH = 'refresh',
+  HIDE_CATEGORY = 'hide_category',
+  VIEW_SQL_PAIR = 'view_sql_pair',
+  VIEW_INSTRUCTION = 'view_instruction',
+  ADJUST_SQL = 'adjust_sql',
+  ADJUST_STEPS = 'adjust_steps',
+}

wren-ui/src/utils/enum/index.ts

@@ -8,3 +8,4 @@ export * from './diagram';
 export * from './home';
 export * from './settings';
 export * from './knowledge';
+export * from './dropdown';

wren-ui/src/utils/enum/modeling.ts

@@ -2,13 +2,3 @@ export {
   NodeType as NODE_TYPE,
   RelationType as JOIN_TYPE,
 } from '@/apollo/client/graphql/__types__';
-
-export enum MORE_ACTION {
-  EDIT = 'edit',
-  DELETE = 'delete',
-  UPDATE_COLUMNS = 'update_columns',
-  REFRESH = 'refresh',
-  HIDE_CATEGORY = 'hide_category',
-  VIEW_SQL_PAIR = 'view_sql_pair',
-  VIEW_INSTRUCTION = 'view_instruction',
-}

wren-ui/src/utils/svgs/EditSVG.tsx

@@ -0,0 +1,29 @@
+export const EditSVG = ({
+  fillCurrentColor = true,
+  className,
+}: {
+  fillCurrentColor?: boolean;
+  className?: string;
+}) => (
+  <svg
+    className={className}
+    width="14"
+    height="14"
+    viewBox="0 0 14 14"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M10.9929 5.04652L10.3083 5.7311L11.602 7.0247L12.2867 6.34012C12.2652 6.26694 12.2367 6.18523 12.2012 6.0998C12.1016 5.86038 11.968 5.64205 11.8296 5.5036C11.6911 5.36514 11.4727 5.23157 11.2333 5.13201C11.1479 5.09648 11.0661 5.06797 10.9929 5.04652ZM10.6592 7.96748L9.36549 6.67388L5.92291 10.1162C5.50551 10.5335 5.25873 11.2125 5.12676 11.8724C5.09852 12.0136 5.07652 12.1489 5.0594 12.2738C5.18415 12.2566 5.31921 12.2346 5.46023 12.2064C6.11984 12.0744 6.79883 11.8275 7.21669 11.4097L10.6592 7.96748ZM4.33325 13C3.66659 13 3.66659 12.9996 3.66659 12.9996L3.66659 12.9983L3.66659 12.9957L3.66664 12.9882L3.66695 12.9637C3.66728 12.9432 3.66793 12.9146 3.66917 12.8787C3.67164 12.807 3.67649 12.7058 3.68602 12.5818C3.70502 12.3349 3.74295 11.9928 3.81931 11.611C3.96692 10.8728 4.27927 9.87414 4.98014 9.17333L10.2919 3.8619C10.4156 3.73825 10.5829 3.66813 10.7578 3.66667C11.0504 3.66422 11.4208 3.76595 11.7452 3.90087C12.0828 4.04124 12.47 4.25846 12.7723 4.56075C13.0747 4.86305 13.2919 5.25027 13.4323 5.58782C13.5672 5.91229 13.669 6.28262 13.6665 6.57528C13.6651 6.75017 13.5949 6.91748 13.4713 7.04115L8.15946 12.3525C7.45837 13.0536 6.45995 13.3661 5.72188 13.5138C5.34011 13.5902 4.99815 13.6282 4.75126 13.6472C4.62736 13.6567 4.5262 13.6616 4.4545 13.6641C4.41863 13.6653 4.39004 13.6659 4.36957 13.6663L4.34504 13.6666L4.33751 13.6666L4.33497 13.6666L4.33401 13.6666C4.33401 13.6666 4.33325 13.6666 4.33325 13ZM4.33325 13V13.6666C3.96506 13.6666 3.66659 13.3678 3.66659 12.9996L4.33325 13Z"
+      fill={fillCurrentColor ? 'currentColor' : undefined}
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M3.99992 0.333313C4.28687 0.333313 4.54163 0.516933 4.63237 0.789161L5.27697 2.72293L7.21074 3.36752C7.48297 3.45827 7.66659 3.71303 7.66659 3.99998C7.66659 4.28693 7.48297 4.54169 7.21074 4.63244L5.27697 5.27703L4.63237 7.2108C4.54163 7.48303 4.28687 7.66665 3.99992 7.66665C3.71297 7.66665 3.45821 7.48303 3.36746 7.2108L2.72287 5.27703L0.7891 4.63244C0.516872 4.54169 0.333252 4.28693 0.333252 3.99998C0.333252 3.71303 0.516872 3.45827 0.7891 3.36752L2.72287 2.72293L3.36746 0.789161C3.45821 0.516933 3.71297 0.333313 3.99992 0.333313ZM3.99992 3.10816L3.88237 3.4608C3.81602 3.65987 3.65981 3.81608 3.46074 3.88244L3.1081 3.99998L3.46074 4.11752C3.65981 4.18388 3.81602 4.34009 3.88237 4.53916L3.99992 4.89179L4.11746 4.53916C4.18382 4.34009 4.34003 4.18388 4.5391 4.11752L4.89173 3.99998L4.5391 3.88244C4.34003 3.81608 4.18382 3.65987 4.11746 3.4608L3.99992 3.10816Z"
+      fill={fillCurrentColor ? 'currentColor' : undefined}
+    />
+  </svg>
+);

wren-ui/src/utils/svgs/index.ts

@@ -1,3 +1,4 @@
 export * from './CopilotSVG';
 export * from './RobotSVG';
 export * from './InstructionsSVG';
+export * from './EditSVG';