From 88a9ac195d73ffaf81b5e0dda2d9958c35c5c7f6 Mon Sep 17 00:00:00 2001 From: Freda Lai Date: Thu, 27 Mar 2025 17:39:36 +0800 Subject: [PATCH] feat(wren-ui): adjust answer result dropdown --- .../src/components/diagram/CustomDropdown.tsx | 41 ++++++++++++++++++- .../home/promptThread/TextBasedAnswer.tsx | 37 +++++++++++++++++ wren-ui/src/hooks/useDropdown.tsx | 15 +++++++ wren-ui/src/utils/enum/dropdown.ts | 11 +++++ wren-ui/src/utils/enum/index.ts | 1 + wren-ui/src/utils/enum/modeling.ts | 10 ----- wren-ui/src/utils/svgs/EditSVG.tsx | 29 +++++++++++++ wren-ui/src/utils/svgs/index.ts | 1 + 8 files changed, 134 insertions(+), 11 deletions(-) create mode 100644 wren-ui/src/hooks/useDropdown.tsx create mode 100644 wren-ui/src/utils/enum/dropdown.ts create mode 100644 wren-ui/src/utils/svgs/EditSVG.tsx diff --git a/wren-ui/src/components/diagram/CustomDropdown.tsx b/wren-ui/src/components/diagram/CustomDropdown.tsx index 646ab2e0c0..b9b4fc4e02 100644 --- a/wren-ui/src/components/diagram/CustomDropdown.tsx +++ b/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} @@ -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: , + key: 'adjust-steps', + onClick: () => + onMoreClick({ + type: MORE_ACTION.ADJUST_STEPS, + data, + }), + }, + { + label: 'Adjust SQL', + className: 'gray-8', + icon: , + key: 'adjust-sql', + onClick: () => + onMoreClick({ + type: MORE_ACTION.ADJUST_SQL, + data, + }), + }, + ]; + return items; + }, +); diff --git a/wren-ui/src/components/pages/home/promptThread/TextBasedAnswer.tsx b/wren-ui/src/components/pages/home/promptThread/TextBasedAnswer.tsx index 752475c391..bbc5af4bb7 100644 --- a/wren-ui/src/components/pages/home/promptThread/TextBasedAnswer.tsx +++ b/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(''); + 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 (
+
+ + + +
{isStreaming && } {status === ThreadResponseAnswerStatus.INTERRUPTED && ( diff --git a/wren-ui/src/hooks/useDropdown.tsx b/wren-ui/src/hooks/useDropdown.tsx new file mode 100644 index 0000000000..24905c1a64 --- /dev/null +++ b/wren-ui/src/hooks/useDropdown.tsx @@ -0,0 +1,15 @@ +import { useState } from 'react'; + +export default function useDropdown() { + const [visible, setVisible] = useState(false); + + const onVisibleChange = (visible: boolean) => setVisible(visible); + + const onCloseDropdownMenu = () => setVisible(false); + + return { + visible, + onVisibleChange, + onCloseDropdownMenu, + }; +} diff --git a/wren-ui/src/utils/enum/dropdown.ts b/wren-ui/src/utils/enum/dropdown.ts new file mode 100644 index 0000000000..bd2956401e --- /dev/null +++ b/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', +} diff --git a/wren-ui/src/utils/enum/index.ts b/wren-ui/src/utils/enum/index.ts index ba70eb1146..7d65d7b4fe 100644 --- a/wren-ui/src/utils/enum/index.ts +++ b/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'; diff --git a/wren-ui/src/utils/enum/modeling.ts b/wren-ui/src/utils/enum/modeling.ts index ea7d5ff923..dfdd7edf64 100644 --- a/wren-ui/src/utils/enum/modeling.ts +++ b/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', -} diff --git a/wren-ui/src/utils/svgs/EditSVG.tsx b/wren-ui/src/utils/svgs/EditSVG.tsx new file mode 100644 index 0000000000..c8bfb3278a --- /dev/null +++ b/wren-ui/src/utils/svgs/EditSVG.tsx @@ -0,0 +1,29 @@ +export const EditSVG = ({ + fillCurrentColor = true, + className, +}: { + fillCurrentColor?: boolean; + className?: string; +}) => ( + + + + +); diff --git a/wren-ui/src/utils/svgs/index.ts b/wren-ui/src/utils/svgs/index.ts index c9b2bb58b5..927cbdc6a8 100644 --- a/wren-ui/src/utils/svgs/index.ts +++ b/wren-ui/src/utils/svgs/index.ts @@ -1,3 +1,4 @@ export * from './CopilotSVG'; export * from './RobotSVG'; export * from './InstructionsSVG'; +export * from './EditSVG';