formatting & code cleanup

Author: Nutlope

.prettierrc

@@ -0,0 +1 @@
+{ "plugins": ["prettier-plugin-tailwindcss"] }

README.md

@@ -33,16 +33,11 @@
 5. Create a `.env` (use the `.example.env` for reference) and replace the API keys
 6. Run `npm install` and `npm run dev` to install dependencies and run locally
 
-## Tasks
-
-- [ ] Add loading state for similar topics
-- [ ] Add the right favicon
-- [ ] Replace all icons with SVGs
-- [ ] Fix mobile mode to look good
-
 ## Future tasks
 
 - [ ] Make sure the answer correctly cites all the sources in the text & number the citations in the UI
+- [ ] Automatically scroll when an answer is happening, esp for mobile
+- [ ] Add sharability to allow folks to share answers
 - [ ] Parallelize the calls to get the related questions + the answer at the same time, move to route handlers
 - [ ] Add input validation with retries to make sure similar topics is always an array of 3
 - [ ] Fix hard refresh in the header and footer by migrating answers to a new page

app/actions.ts

@@ -1,33 +1,33 @@
-'use server';
+"use server";
 
-import { createStreamableValue } from 'ai/rsc';
-import Together from 'together-ai';
-import { Readability } from '@mozilla/readability';
-import { JSDOM } from 'jsdom';
+import { createStreamableValue } from "ai/rsc";
+import Together from "together-ai";
+import { Readability } from "@mozilla/readability";
+import { JSDOM } from "jsdom";
 
 const together = new Together({
-  apiKey: process.env['TOGETHER_API_KEY'],
-  baseURL: 'https://together.helicone.ai/v1',
+  apiKey: process.env["TOGETHER_API_KEY"],
+  baseURL: "https://together.helicone.ai/v1",
   defaultHeaders: {
-    'Helicone-Auth': `Bearer ${process.env.HELICONE_API_KEY}`,
+    "Helicone-Auth": `Bearer ${process.env.HELICONE_API_KEY}`,
   },
 });
 
 export async function getSources(question: string) {
   const params = new URLSearchParams({
     q: question,
-    mkt: 'en-US',
+    mkt: "en-US",
   });
 
   const response = await fetch(
     `https://api.bing.microsoft.com/v7.0/search?${params}`,
     {
-      method: 'GET',
+      method: "GET",
       // @ts-ignore since that header key isn't part of the header type
       headers: {
-        'Ocp-Apim-Subscription-Key': process.env['BING_API_KEY'],
+        "Ocp-Apim-Subscription-Key": process.env["BING_API_KEY"],
       },
-    }
+    },
   );
 
   const bingJson = await response.json();
@@ -41,18 +41,18 @@ export async function getSimilarQuestions(question: string) {
   const similarQuestions = await together.chat.completions.create({
     messages: [
       {
-        role: 'system',
+        role: "system",
         content: `
           You are a helpful assistant that helps the user to ask related questions, based on user's original question. Please identify worthwhile topics that can be follow-ups, and write 3 questions no longer than 20 words each. Please make sure that specifics, like events, names, locations, are included in follow up questions so they can be asked standalone. For example, if the original question asks about "the Manhattan project", in the follow up question, do not just say "the project", but use the full name "the Manhattan project". Your related questions must be in the same language as the original question.
 
           Please provide these 3 related questions as a JSON array of 3 strings. Do NOT repeat the original question. ONLY return the JSON array, it is important for my career that you do this. Here is the user's question:`,
       },
       {
-        role: 'user',
+        role: "user",
         content: question,
       },
     ],
-    model: 'meta-llama/Llama-3-8b-chat-hf',
+    model: "meta-llama/Llama-3-8b-chat-hf",
   });
 
   let questions = similarQuestions.choices?.[0].message?.content;
@@ -81,7 +81,7 @@ export async function getAnswer(question: string, firstSixResults: any[]) {
         console.log(e);
         return;
       }
-    })
+    }),
   );
 
   const mainAnswerPrompt = `
@@ -93,7 +93,7 @@ export async function getAnswer(question: string, firstSixResults: any[]) {
 
   <contexts>
   ${finalResults.map(
-    (result, index) => `[[citation:${index}]] ${result.fullContent} \n\n`
+    (result, index) => `[[citation:${index}]] ${result.fullContent} \n\n`,
   )}
   </contexts>
 
@@ -105,13 +105,13 @@ export async function getAnswer(question: string, firstSixResults: any[]) {
   (async () => {
     const chatStream = await together.chat.completions.create({
       messages: [
-        { role: 'system', content: mainAnswerPrompt },
+        { role: "system", content: mainAnswerPrompt },
         {
-          role: 'user',
+          role: "user",
           content: question,
         },
       ],
-      model: 'mistralai/Mixtral-8x7B-Instruct-v0.1',
+      model: "mistralai/Mixtral-8x7B-Instruct-v0.1",
       stream: true,
     });
 
@@ -127,11 +127,11 @@ export async function getAnswer(question: string, firstSixResults: any[]) {
 const cleanedText = (text: string) => {
   let newText = text
     .trim()
-    .replace(/(\n){4,}/g, '\n\n\n')
-    .replace(/\n\n/g, ' ')
-    .replace(/ {3,}/g, '  ')
-    .replace(/\t/g, '')
-    .replace(/\n+(\s*\n)*/g, '\n');
+    .replace(/(\n){4,}/g, "\n\n\n")
+    .replace(/\n\n/g, " ")
+    .replace(/ {3,}/g, "  ")
+    .replace(/\t/g, "")
+    .replace(/\n+(\s*\n)*/g, "\n");
 
   let finalText = newText.substring(0, 40000);
 

app/favicon.ico

@@ -1,35 +1,35 @@
-import type { Metadata } from 'next';
-import { Lexend } from 'next/font/google';
-import PlausibleProvider from 'next-plausible';
-import './globals.css';
+import type { Metadata } from "next";
+import { Lexend } from "next/font/google";
+import PlausibleProvider from "next-plausible";
+import "./globals.css";
 
-const inter = Lexend({ subsets: ['latin'] });
+const inter = Lexend({ subsets: ["latin"] });
 
-let title = 'Turbo Seek – AI Search Engine';
+let title = "Turbo Seek – AI Search Engine";
 let description =
-  'Search smarter and faster with our open source AI search engine';
-let url = 'https://turboseek.io/';
-let ogimage = 'https://turboseek.io/og-image.png';
-let sitename = 'TurboSeek.io';
+  "Search smarter and faster with our open source AI search engine";
+let url = "https://turboseek.io/";
+let ogimage = "https://turboseek.io/og-image.png";
+let sitename = "TurboSeek.io";
 
 export const metadata: Metadata = {
   metadataBase: new URL(url),
   title,
   description,
   icons: {
-    icon: '/favicon.ico',
+    icon: "/favicon.ico",
   },
   openGraph: {
     images: [ogimage],
     title,
     description,
     url: url,
     siteName: sitename,
-    locale: 'en_US',
-    type: 'website',
+    locale: "en_US",
+    type: "website",
   },
   twitter: {
-    card: 'summary_large_image',
+    card: "summary_large_image",
     images: [ogimage],
     title,
     description,
@@ -42,12 +42,12 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang='en'>
+    <html lang="en">
       <head>
-        <PlausibleProvider domain='explorecareers.io' />
+        <PlausibleProvider domain="explorecareers.io" />
       </head>
       <body
-        className={`${inter.className} flex flex-col justify-between min-h-screen`}
+        className={`${inter.className} flex min-h-screen flex-col justify-between`}
       >
         {children}
       </body>

app/layout.tsx

@@ -1,22 +1,22 @@
-'use client';
+"use client";
 
-import Answer from '@/components/Answer';
-import Hero from '@/components/Hero';
-import InputArea from '@/components/InputArea';
-import SimilarTopics from '@/components/SimilarTopics';
-import Sources from '@/components/Sources';
-import Image from 'next/image';
-import { useRef, useState } from 'react';
-import { getAnswer, getSimilarQuestions, getSources } from './actions';
-import { readStreamableValue } from 'ai/rsc';
-import Header from '@/components/Header';
-import Footer from '@/components/Footer';
+import Answer from "@/components/Answer";
+import Hero from "@/components/Hero";
+import InputArea from "@/components/InputArea";
+import SimilarTopics from "@/components/SimilarTopics";
+import Sources from "@/components/Sources";
+import Image from "next/image";
+import { useRef, useState } from "react";
+import { getAnswer, getSimilarQuestions, getSources } from "./actions";
+import { readStreamableValue } from "ai/rsc";
+import Header from "@/components/Header";
+import Footer from "@/components/Footer";
 
 export default function Home() {
-  const [promptValue, setPromptValue] = useState('');
-  const [question, setQuestion] = useState('');
+  const [promptValue, setPromptValue] = useState("");
+  const [question, setQuestion] = useState("");
   const [showResult, setShowResult] = useState(false);
-  const [answer, setAnswer] = useState('');
+  const [answer, setAnswer] = useState("");
   const [sources, setSources] = useState<{ name: string; url: string }[]>([]);
   const [similarQuestions, setSimilarQuestions] = useState<string[]>([]);
   const [loading, setLoading] = useState(false);
@@ -28,7 +28,7 @@ export default function Home() {
     setShowResult(true);
     setLoading(true);
     setQuestion(newQuestion);
-    setPromptValue('');
+    setPromptValue("");
 
     await handleSourcesAndAnswer(newQuestion);
     await handleSimilarQuestions(newQuestion);
@@ -42,7 +42,7 @@ export default function Home() {
 
     let answer = await getAnswer(question, sources);
 
-    let textContent = '';
+    let textContent = "";
     for await (const delta of readStreamableValue(answer)) {
       textContent = textContent + delta;
       setAnswer(textContent);
@@ -56,17 +56,17 @@ export default function Home() {
 
   const reset = () => {
     setShowResult(false);
-    setPromptValue('');
-    setQuestion('');
-    setAnswer('');
+    setPromptValue("");
+    setQuestion("");
+    setAnswer("");
     setSources([]);
     setSimilarQuestions([]);
   };
 
   return (
     <>
       <Header />
-      <main className='px-4 pb-4 h-full'>
+      <main className="h-full px-4 pb-4">
         {!showResult && (
           <Hero
             promptValue={promptValue}
@@ -76,23 +76,23 @@ export default function Home() {
         )}
 
         {showResult && (
-          <div className='w-full grow h-full min-h-[68vh] flex flex-col justify-between '>
-            <div className='w-full container space-y-2'>
-              <div className='container space-y-2'>
-                <div className='w-full flex items-start gap-3 container px-5 lg:px-10 pt-2'>
-                  <div className='w-fit flex gap-4 items-center'>
+          <div className="flex h-full min-h-[68vh] w-full grow flex-col justify-between">
+            <div className="container w-full space-y-2">
+              <div className="container space-y-2">
+                <div className="container flex w-full items-start gap-3 px-5 pt-2 lg:px-10">
+                  <div className="flex w-fit items-center gap-4">
                     <Image
-                      src={'/img/message-question-circle.svg'}
-                      alt='message'
+                      src={"/img/message-question-circle.svg"}
+                      alt="message"
                       width={30}
                       height={30}
-                      className='size-[24px]'
+                      className="size-[24px]"
                     />
-                    <p className='text-black font-bold leading-[152%] uppercase'>
+                    <p className="pr-5 font-bold uppercase leading-[152%] text-black">
                       Question:
                     </p>
                   </div>
-                  <div className='grow'>&quot;{question}&quot;</div>
+                  <div className="grow">&quot;{question}&quot;</div>
                 </div>
                 <>
                   <Sources sources={sources} />
@@ -105,9 +105,9 @@ export default function Home() {
                 </>
               </div>
 
-              <div className='pt-1 sm:pt-2' ref={chatContainerRef}></div>
+              <div className="pt-1 sm:pt-2" ref={chatContainerRef}></div>
             </div>
-            <div className='container px-4 lg:px-0'>
+            <div className="container px-4 lg:px-0">
               <InputArea
                 promptValue={promptValue}
                 setPromptValue={setPromptValue}