Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore(wren-ui): Create thread directly when receiving one candidate #855

Merged
merged 1 commit into from
Nov 4, 2024
+29 −233
Merged

chore(wren-ui): Create thread directly when receiving one candidate #855

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
241 changes: 29 additions & 212 deletions wren-ui/src/components/pages/home/prompt/Result.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,14 @@
import { ReactNode, useMemo } from 'react';
import Link from 'next/link';
import { Row, Col, Button, Popover, Skeleton } from 'antd';
import { ReactNode, useEffect } from 'react';
import { Button } from 'antd';
import styled from 'styled-components';
import { PROCESS_STATE, Path } from '@/utils/enum';
import { makeIterable } from '@/utils/iteration';
import CheckCircleOutlined from '@ant-design/icons/CheckCircleOutlined';
import FunctionOutlined from '@ant-design/icons/FunctionOutlined';
import { PROCESS_STATE } from '@/utils/enum';
import CloseOutlined from '@ant-design/icons/CloseOutlined';
import StopOutlined from '@ant-design/icons/StopFilled';
import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
import WarningOutlined from '@ant-design/icons/WarningOutlined';
import FileAddOutlined from '@ant-design/icons/FileAddOutlined';
import { SparklesIcon } from '@/utils/icons';
import ViewSQLModal from '@/components/pages/home/prompt/ViewSQLModal';
import EllipsisWrapper from '@/components/EllipsisWrapper';
import ErrorCollapse from '@/components/ErrorCollapse';
import useModalAction from '@/hooks/useModalAction';
import useAskProcessState, {
getIsProcessing,
} from '@/hooks/useAskProcessState';
import useAskProcessState from '@/hooks/useAskProcessState';
import { AskingTask } from '@/apollo/client/graphql/__types__';

const StyledResult = styled.div`
Expand All @@ -33,40 +22,6 @@ const StyledResult = styled.div`
rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
`;

const ResultBlock = styled.div`
user-select: none;
overflow: hidden;
&:hover {
border-color: var(--geekblue-6) !important;
transition: border-color ease 0.2s;
}
`;

const MarkedResultBlock = styled.div`
height: 32px;
margin-left: -12px;
margin-right: -12px;
padding-top: 8px;
`;

const StyledSkeleton = styled(Skeleton)`
margin-bottom: 22px;
.ant-skeleton-title {
height: 14px;
margin-top: 4px;

+ .ant-skeleton-paragraph {
margin-top: 20px;
li {
height: 14px;
+ li {
margin-top: 8px;
}
}
}
}
`;

interface Props {
processState: ReturnType<typeof useAskProcessState>;
data: AskingTask['candidates'];
Expand All @@ -77,148 +32,23 @@ interface Props {
loading?: boolean;
}

const ResultSkeleton = () => (
<div className="border border-gray-5 rounded px-3 pt-3 ">
<StyledSkeleton active paragraph={{ rows: 3 }} />
</div>
);

const ResultTemplate = ({
index,
summary,
sql,
view,
loading,
onSelect,
onShowSQL,
}) => {
const isViewSaved = !!view;

if (loading) {
return (
<Col span={8}>
<ResultSkeleton />
</Col>
);
}

return (
<Col span={8}>
<ResultBlock
className="border border-gray-5 rounded px-3 pt-3 cursor-pointer"
onClick={() => onSelect({ sql, summary, viewId: view?.id })}
>
<div className="d-flex justify-space-between align-center text-sm mb-3">
<div className="border border-gray-5 px-2 rounded-pill">
Result {index + 1}
</div>
<Button
className="adm-btn-no-style gray-6 text-sm px-1"
type="text"
onClick={(event) => onShowSQL(event, { sql, summary })}
>
<FunctionOutlined className="-mr-1" />
View SQL
</Button>
</div>
<EllipsisWrapper multipleLine={3} minHeight={66} text={summary} />
<MarkedResultBlock onClickCapture={(event) => event.stopPropagation()}>
{isViewSaved && (
<Popover
trigger={['hover']}
placement="topLeft"
content={
<div className="d-flex" style={{ width: 300 }}>
<SparklesIcon
className="text-md geekblue-6 mr-2"
style={{ marginTop: 2 }}
/>
<div style={{ width: '90%', wordBreak: 'break-all' }}>
This search result corresponds to a saved view:{' '}
<Link
href={`${Path.Modeling}?viewId=${view.id}&openMetadata=true`}
target="_blank"
rel="noreferrer noopener"
>
{view.displayName}
</Link>
</div>
</div>
}
>
<div className="d-flex align-center bg-geekblue-1 geekblue-6 text-xs px-3 py-1">
<FileAddOutlined className="text-sm mr-2" /> Result from a saved
view
</div>
</Popover>
)}
</MarkedResultBlock>
</ResultBlock>
</Col>
);
};
const ResultColumnIterator = makeIterable(ResultTemplate);
const CandidateResults = (props: Props) => {
const { data = [], loading, onSelect } = props;

// Remain showing 3 results when in loading mode,
// If no data, provide loading property to result template to show skeleton
const results = useMemo(() => {
return loading
? Array.from({ length: 3 }).map((_, index) => {
return data[index] || { loading };
})
: data;
}, [data]);

const viewSQLModal = useModalAction();

const showSQL = (event, payload: { sql: string; summary: string }) => {
viewSQLModal.openModal(payload);
event.stopPropagation();
};

const selectResult = (payload: { sql: string; summary: string }) => {
onSelect && onSelect(payload);
};

return (
<>
<Row gutter={[12, 12]}>
<ResultColumnIterator
data={results}
onShowSQL={showSQL}
onSelect={selectResult}
/>
</Row>
<ViewSQLModal {...viewSQLModal.state} onClose={viewSQLModal.closeModal} />
</>
);
};

const makeProcessing = (text: string) => (props: Props) => {
const { onStop, processState } = props;
const { onStop } = props;
return (
<div>
<div className="d-flex justify-space-between mb-3">
<span>
<LoadingOutlined className="mr-2 geekblue-6 text-lg" spin />
{text}
</span>
<Button
className="adm-btn-no-style gray-7 bg-gray-3 text-sm px-2"
type="text"
size="small"
onClick={onStop}
>
<StopOutlined className="-mr-1" />
Stop
</Button>
</div>
<CandidateResults
{...props}
loading={getIsProcessing(processState.currentState)}
/>
<div className="d-flex justify-space-between">
<span>
<LoadingOutlined className="mr-2 geekblue-6 text-lg" spin />
{text}
</span>
<Button
className="adm-btn-no-style gray-7 bg-gray-3 text-sm px-2"
type="text"
size="small"
onClick={onStop}
>
<StopOutlined className="-mr-1" />
Stop
</Button>
</div>
);
};
Expand Down Expand Up @@ -268,32 +98,19 @@ const NoResult = makeProcessingError({

const Understanding = makeProcessing('Understanding question');
const Searching = makeProcessing('Searching data');
const Generating = makeProcessing('Generating result(s)');
const Generating = makeProcessing('Generating answer');
const Finished = (props: Props) => {
const { data, onClose } = props;
const { data, onSelect } = props;

if (data.length === 0) return <NoResult {...props} />;
useEffect(() => {
if (data.length) {
const [result] = data;
onSelect && onSelect({ sql: result.sql, summary: result.summary });
}
}, [data]);

return (
<div>
<div className="d-flex justify-space-between mb-3">
<div className="d-flex align-center text-medium">
<CheckCircleOutlined className="mr-2 green-7 text-lg" /> {data.length}{' '}
result(s) found
</div>
<Button
className="adm-btn-no-style gray-7 bg-gray-3 text-sm px-2"
type="text"
size="small"
onClick={onClose}
>
<CloseOutlined className="-mr-1" />
Close
</Button>
</div>
<CandidateResults {...props} />
</div>
);
if (data.length === 0) return <NoResult {...props} />;
return null;
};

const getProcessStateComponent = (state: PROCESS_STATE) => {
Expand Down
21 changes: 0 additions & 21 deletions wren-ui/src/components/pages/home/prompt/ViewSQLModal.tsx
View file
Open in desktop

This file was deleted.