From f49a30372dfb14b69571eb23c3ab37da993da674 Mon Sep 17 00:00:00 2001
From: zaidmukaddam <zaidaltafmukaddam@gmail.com>
Date: Thu, 28 Nov 2024 20:31:05 +0530
Subject: [PATCH] feat: update model in suggestQuestions and improve dialog
 accessibility and TabsList styling in MultiSearch component

---
 app/actions.ts              |  4 ++--
 components/multi-search.tsx | 15 ++++++++-------
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/app/actions.ts b/app/actions.ts
index 2822d33..a64d0be 100644
--- a/app/actions.ts
+++ b/app/actions.ts
@@ -11,7 +11,7 @@ export async function suggestQuestions(history: any[]) {
   console.log(history); 
 
   const { object } = await generateObject({
-    model: google('gemini-1.5-pro-002',{
+    model: google('gemini-1.5-flash-8b',{
       structuredOutputs: true,
     }),
     temperature: 1,
@@ -27,7 +27,7 @@ For weather based converations sent to you, always generate questions that are a
 For programming based conversations, always generate questions that are about the algorithms, data structures, or other topics that are related to it or an improvement of the question.
 For location based conversations, always generate questions that are about the culture, history, or other topics that are related to the location.
 For the translation based conversations, always generate questions that may continue the conversation or ask for more information or translations.
-Never use pronouns in the questions as they blur the context.`,
+Do not use pronouns like he, she, him, his, her, etc. in the questions as they blur the context. Always use the proper nouns from the context.`,
     messages: history,
     schema: z.object({
       questions: z.array(z.string()).describe('The generated questions based on the message history.')
diff --git a/components/multi-search.tsx b/components/multi-search.tsx
index 4afa57c..ffcf5ec 100644
--- a/components/multi-search.tsx
+++ b/components/multi-search.tsx
@@ -2,7 +2,7 @@
 import React, { useState } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Dialog, DialogContent } from "@/components/ui/dialog";
+import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { ArrowUpRight, Calendar, ChevronLeft, ChevronRight, Clock, Globe, ImageIcon, Newspaper, Search, X } from 'lucide-react';
@@ -302,12 +302,12 @@ const MultiSearch: React.FC<{ result: MultiSearchResponse | null; args: MultiSea
             <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
                 <div className="relative w-full">
                     <div className="w-full overflow-y-scroll">
-                        <TabsList className="inline-flex h-auto gap-2 dark:bg-neutral-900 bg-white p-2 rounded-xl dark:border-neutral-800 border-gray-200 border">
+                        <TabsList className="inline-flex h-auto gap-2 dark:bg-inherit bg-white p-0 m-0">
                             {result.searches.map((search, index) => (
                                 <TabsTrigger
                                     key={index}
                                     value={index.toString()}
-                                    className="flex-shrink-0 px-3 py-2 rounded-lg transition-all data-[state=active]:dark:bg-neutral-800 data-[state=active]:bg-gray-200 data-[state=active]:text-gray-900 data-[state=active]:dark:text-white text-gray-400 dark:text-neutral-400 hover:text-gray-700 dark:hover:text-neutral-200"
+                                    className="flex-shrink-0 px-3 py-2 rounded-xl !shadow-none border transition-all data-[state=active]:dark:bg-neutral-800 data-[state=active]:border-neutral-400 data-[state=active]:text-gray-900 data-[state=active]:dark:text-white text-gray-400 dark:text-neutral-400 hover:text-gray-700 dark:hover:text-neutral-200"
                                 >
                                     <SearchQueryTab
                                         query={search.query}
@@ -320,7 +320,7 @@ const MultiSearch: React.FC<{ result: MultiSearchResponse | null; args: MultiSea
                     </div>
                 </div>
 
-                <AnimatePresence mode="wait">
+                <AnimatePresence>
                     {result.searches.map((search, index) => (
                         <TabsContent key={index} value={index.toString()}>
                             <SearchResults
@@ -339,7 +339,8 @@ const MultiSearch: React.FC<{ result: MultiSearchResponse | null; args: MultiSea
 
             {galleryOpen && result.searches[selectedSearch].images && (
                 <Dialog open={galleryOpen} onOpenChange={setGalleryOpen}>
-                    <DialogContent className="max-w-3xl max-h-[85vh] p-0 dark:bg-neutral-900 bg-white dark:border-neutral-800 border-gray-200">
+                    <DialogTitle className='sr-only'>Image Gallery</DialogTitle>
+                    <DialogContent className="max-w-3xl max-h-[85vh] p-0 dark:bg-neutral-900 bg-white dark:border-neutral-800 border-gray-200 !font-sans">
                         <div className="relative w-full h-full">
                             <div className="absolute right-3 top-3 z-50 flex items-center gap-2">
                                 <span className="px-2 py-1 rounded-md dark:bg-neutral-800 bg-gray-100 text-xs dark:text-neutral-300 text-gray-600">
@@ -360,8 +361,8 @@ const MultiSearch: React.FC<{ result: MultiSearchResponse | null; args: MultiSea
                                     className="max-h-[70vh] object-contain rounded-md mx-auto p-4"
                                 />
                                 {result.searches[selectedSearch].images[selectedImage].description && (
-                                    <div className="absolute inset-x-0 bottom-4 mx-4 p-2 bg-gradient-to-t from-black/80 to-transparent rounded-b-md">
-                                        <p className="text-xs text-white/90 text-center">
+                                    <div className="absolute inset-x-0 bottom-0 p-4 bg-gradient-to-t from-black/80 to-transparent rounded-b-md">
+                                        <p className="text-xs text-white text-center bg-black/50 p-1 rounded">
                                             {result.searches[selectedSearch].images[selectedImage].description}
                                         </p>
                                     </div>