feat(wren-ui): Click recommended questions to go to thread creation

wren-ui/src/components/pages/home/RecommendedQuestions.tsx

@@ -9,6 +9,11 @@ import {
   RecommendedQuestionsTaskStatus,
 } from '@/apollo/client/graphql/__types__';
 
+export interface SelectQuestionProps {
+  question: string;
+  sql: string;
+}
+
 interface Props {
   items: { question: string; sql: string }[];
   loading?: boolean;
@@ -19,7 +24,7 @@ interface Props {
     stacktrace?: string[];
   };
   className?: string;
-  onSelect?: ({ question, sql }: { question: string; sql: string }) => void;
+  onSelect: ({ question, sql }: SelectQuestionProps) => void;
 }
 
 const StyledSkeleton = styled(Skeleton)`
@@ -59,7 +64,7 @@ const QuestionItem = (props: {
   index: number;
   question: string;
   sql: string;
-  onSelect?: ({ question, sql }: { question: string; sql: string }) => void;
+  onSelect: ({ question, sql }: SelectQuestionProps) => void;
 }) => {
   const { index, question, sql, onSelect } = props;
   return (

wren-ui/src/components/pages/home/prompt/DemoPrompt.tsx

@@ -14,7 +14,7 @@ const DemoBlock = styled.div`
 
 interface Props {
   demo: any[];
-  onSelect: (data: any) => void;
+  onSelect: (data: { label: string; question: string }) => void;
 }
 
 const DemoTemplate = ({ label, question, onSelect }) => {

wren-ui/src/components/pages/home/prompt/RecommendedQuestionsPrompt.tsx

@@ -6,6 +6,7 @@ import MinusOutlined from '@ant-design/icons/MinusOutlined';
 import EllipsisWrapper from '@/components/EllipsisWrapper';
 import { Logo } from '@/components/Logo';
 import { makeIterable } from '@/utils/iteration';
+import { GroupedQuestion } from '@/hooks/useRecommendedQuestionsInstruction';
 
 const CategorySectionBlock = styled.div`
   background: var(--gray-1);
@@ -27,6 +28,11 @@ const QuestionBlock = styled.div`
 
 const MAX_EXPANDED_QUESTIONS = 9;
 
+interface Props {
+  onSelect: (payload: { sql: string; question: string }) => void;
+  recommendedQuestions: GroupedQuestion[];
+}
+
 const QuestionTemplate = ({ category, sql, question, onSelect }) => {
   return (
     <Col span={8}>
@@ -47,7 +53,7 @@ const QuestionTemplate = ({ category, sql, question, onSelect }) => {
 
 const QuestionColumnIterator = makeIterable(QuestionTemplate);
 
-export default function RecommendedQuestionsPrompt(props) {
+export default function RecommendedQuestionsPrompt(props: Props) {
   const { onSelect, recommendedQuestions } = props;
 
   const [isExpanded, setIsExpanded] = useState<boolean>(false);

wren-ui/src/components/pages/home/prompt/index.tsx

@@ -18,14 +18,14 @@ import {
   AskingTask,
   AskingTaskStatus,
   AskingTaskType,
+  CreateThreadInput,
+  CreateThreadResponseInput,
 } from '@/apollo/client/graphql/__types__';
 
 interface Props {
-  onSelect: (payload: {
-    sql?: string;
-    question?: string;
-    viewId?: number;
-  }) => Promise<void>;
+  onSelect: (
+    payload: CreateThreadInput | CreateThreadResponseInput,
+  ) => Promise<void>;
   onStop: () => void;
   onSubmit: (value: string) => Promise<void>;
   onStopPolling: () => void;

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

@@ -61,6 +61,22 @@ const QuestionTitle = (props) => {
   );
 };
 
+const renderRecommendedQuestions = (
+  isLastThreadResponse: boolean,
+  recommendedQuestionProps,
+  onSelect: RecommendedQuestionsProps['onSelect'],
+) => {
+  if (!isLastThreadResponse || !recommendedQuestionProps.show) return null;
+
+  return (
+    <RecommendedQuestions
+      className="mt-5 mb-4"
+      {...recommendedQuestionProps.state}
+      onSelect={onSelect}
+    />
+  );
+};
+
 export default function AnswerResult(props: Props) {
   const {
     motion,
@@ -92,12 +108,19 @@ export default function AnswerResult(props: Props) {
     <div style={resultStyle} className="adm-answer-result">
       <QuestionTitle className="mb-9" question={question} />
       {error ? (
-        <Alert
-          message={error.shortMessage}
-          description={error.message}
-          type="error"
-          showIcon
-        />
+        <>
+          <Alert
+            message={error.shortMessage}
+            description={error.message}
+            type="error"
+            showIcon
+          />
+          {renderRecommendedQuestions(
+            isLastThreadResponse,
+            recommendedQuestionProps,
+            recommendedQuestionsProps.onSelect,
+          )}
+        </>
       ) : (
         <StyledSkeleton active loading={loading}>
           <div className={clsx({ 'promptThread-answer': motion })}>
@@ -150,12 +173,10 @@ export default function AnswerResult(props: Props) {
                 Save as View
               </Button>
             )}
-            {isLastThreadResponse && recommendedQuestionProps.show && (
-              <RecommendedQuestions
-                className="mt-5 mb-4"
-                {...recommendedQuestionProps.state}
-                onSelect={recommendedQuestionsProps.onSelect}
-              />
+            {renderRecommendedQuestions(
+              isLastThreadResponse,
+              recommendedQuestionProps,
+              recommendedQuestionsProps.onSelect,
             )}
           </div>
         </StyledSkeleton>

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

@@ -10,11 +10,7 @@ import {
   RecommendedQuestionsTask,
   ThreadResponse,
 } from '@/apollo/client/graphql/__types__';
-
-interface SelectQuestionProps {
-  question: string;
-  sql: string;
-}
+import { SelectQuestionProps } from '@/components/pages/home/RecommendedQuestions';
 
 export interface RecommendedQuestionsProps {
   data: RecommendedQuestionsTask;
@@ -61,11 +57,7 @@ const AnswerResultTemplate: React.FC<
     motion: boolean;
     onOpenSaveAsViewModal: (data: { sql: string; responseId: number }) => void;
     onInitPreviewDone: () => void;
-    recommendedQuestionsProps: {
-      data: RecommendedQuestionsTask;
-      show: boolean;
-      onSelect: ({ question, sql }: SelectQuestionProps) => void;
-    };
+    recommendedQuestionsProps: RecommendedQuestionsProps;
   }
 > = ({
   data,

wren-ui/src/hooks/useRecommendedQuestionsInstruction.tsx

@@ -14,7 +14,7 @@ import {
   useGenerateProjectRecommendationQuestionsMutation,
 } from '@/apollo/client/graphql/home.generated';
 
-interface GroupedQuestion {
+export interface GroupedQuestion {
   category: string;
   question: string;
   sql: string;
@@ -125,7 +125,6 @@ export default function useRecommendedQuestionsInstruction() {
     };
 
     if (showRecommendedQuestionsPromptMode && isRegenerate) {
-      // The cost of generating recommend questions is too high, so we still return button pops, but the button will not show on the UI now.
       return {
         ...baseProps,
         icon: <ReloadOutlined />,

wren-ui/src/pages/home/[id].tsx

@@ -21,6 +21,7 @@ import {
   useGetThreadRecommendationQuestionsLazyQuery,
 } from '@/apollo/client/graphql/home.generated';
 import { useCreateViewMutation } from '@/apollo/client/graphql/view.generated';
+import { CreateThreadResponseInput } from '@/apollo/client/graphql/__types__';
 
 export default function HomeThread() {
   const $prompt = useRef<ComponentRef<typeof Prompt>>(null);
@@ -152,7 +153,7 @@ export default function HomeThread() {
     [thread, recommendedQuestions, showRecommendedQuestions],
   );
 
-  const onSelect = async (payload) => {
+  const onSelect = async (payload: CreateThreadResponseInput) => {
     try {
       askPrompt.onStopPolling();
       const response = await createThreadResponse({

wren-ui/src/pages/home/index.tsx

@@ -17,6 +17,7 @@ import {
   useGenerateThreadRecommendationQuestionsMutation,
 } from '@/apollo/client/graphql/home.generated';
 import { useGetSettingsQuery } from '@/apollo/client/graphql/settings.generated';
+import { CreateThreadInput } from '@/apollo/client/graphql/__types__';
 
 const { Text } = Typography;
 
@@ -120,7 +121,7 @@ export default function Home() {
     $prompt.current.submit();
   };
 
-  const onSelect = async (payload) => {
+  const onSelect = async (payload: CreateThreadInput) => {
     try {
       askPrompt.onStopPolling();
       const response = await createThread({ variables: { data: payload } });
@@ -143,7 +144,7 @@ export default function Home() {
       )}
 
       {!isSampleDataset && (
-        <RecommendedQuestionsInstruction onSelect={onSelectQuestion} />
+        <RecommendedQuestionsInstruction onSelect={onSelect} />
       )}
       <Prompt ref={$prompt} {...askPrompt} onSelect={onSelect} />
     </SiderLayout>