chore(wren-ui): improve ts

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/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 } });