refining answer prompt, sending answers down to client

Author: wjohnsto

app/.eslintrc.json

@@ -18,16 +18,19 @@
         "@typescript-eslint/no-misused-promises": "off",
         "@typescript-eslint/space-before-function-paren": "off",
         "@typescript-eslint/comma-dangle": ["error", "always-multiline"],
-        "@typescript-eslint/member-delimiter-style": ["error", {
-            "multiline": {
-              "delimiter": "semi",
-              "requireLast": true
-            },
-            "singleline": {
-              "delimiter": "semi",
-              "requireLast": false
-            },
-            "multilineDetection": "brackets"
-          }]
+        "@typescript-eslint/member-delimiter-style": [
+            "error",
+            {
+                "multiline": {
+                    "delimiter": "semi",
+                    "requireLast": true
+                },
+                "singleline": {
+                    "delimiter": "semi",
+                    "requireLast": false
+                },
+                "multilineDetection": "brackets"
+            }
+        ]
     }
 }

app/package.json

@@ -12,7 +12,8 @@
         "formik": "^2.4.5",
         "next": "14.0.4",
         "react": "^18",
-        "react-dom": "^18"
+        "react-dom": "^18",
+        "react-markdown": "^9.0.1"
     },
     "devDependencies": {
         "@types/node": "^20",

app/src/app/page.tsx

@@ -6,9 +6,15 @@ import VideoList, { type VideoDocument } from '@/components/VideoList';
 import Modal from '@/components/Modal';
 import UploadButton from '@/components/UploadButton';
 import VideoForm from '@/components/VideoForm';
+import Markdown from '@/components/Markdown';
+
+interface VideoSearchResult {
+  videos: VideoDocument[];
+  answer: string;
+}
 
 export default function Home() {
-  const [videos, setVideos] = useState<VideoDocument[]>([]);
+  const [results, setResults] = useState<VideoSearchResult>();
   const [showModal, setShowModal] = useState(false);
 
   const handleSubmit = async (videos: string[]) => {
@@ -25,19 +31,25 @@ export default function Home() {
   const handleSearch = async (question: string) => {
     // Replace with your API call
     const response = await fetch(`/api/search?question=${question}`);
-    const data: { results: VideoDocument[] } = await response.json();
-    setVideos(data.results ?? []);
+    const data: VideoSearchResult = await response.json();
+    setResults(data);
   };
 
   return (
     <>
       <main className="flex min-h-screen flex-col items-center justify-between p-24">
         <div className="container mx-auto p-4">
           <h1 className="text-3xl md:text-4xl font-bold text-center text-indigo-600 my-8">
-            Search for videos... semantically!
+            Ask me about Redis
           </h1>
           <QuestionForm onSubmit={handleSearch} />
-          <VideoList videos={videos} />
+          {typeof results !== 'undefined' && (
+            <div className="py-4">
+              <Markdown markdown={results?.answer ?? ''} />
+              <h2>To learn more, check out these videos:</h2>
+              <VideoList videos={results?.videos ?? []} />
+            </div>
+          )}
         </div>
       </main>
 

app/src/components/Markdown.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+
+export interface MarkdownProps {
+  markdown: string;
+}
+
+function Markdown({ markdown }: MarkdownProps) {
+  return <ReactMarkdown>{markdown}</ReactMarkdown>;
+}
+
+export default Markdown;