Merge pull request #214 from priyanshuverma-dev/fix-engine-and-chats

fixes: AI engine section and chats auto scroll

.gitignore

@@ -5,4 +5,5 @@
 .env
 \myenv
 
-/tailwind/*
+/tailwind/*
+*.log

client/src/contexts/settings-context.tsx

@@ -34,6 +34,8 @@ export const SettingsProvider: React.FC<{ children: React.ReactNode }> = ({
     if (savedConfigs) {
       try {
         const parsedConfigs = JSON.parse(savedConfigs);
+
+        setCurrentConfig(parsedConfigs[0]);
         // Optionally, you can check if parsedConfigs is an array or object
         if (Array.isArray(parsedConfigs) || typeof parsedConfigs === "object") {
           setConfigurations(parsedConfigs);

client/src/pages/Chatbot.tsx

@@ -15,7 +15,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import axios from "axios";
 import { ArrowLeft, Loader2, SendIcon, Trash2 } from "lucide-react";
-import { useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useForm } from "react-hook-form";
 import toast from "react-hot-toast";
 import { useNavigate, useParams } from "react-router-dom";
@@ -32,6 +32,7 @@ export default function ChatbotPage() {
     queryKey: ["chatbot", id],
     queryFn: () => fetchChatbotData(id),
   });
+  const messageEl = useRef(null);
   const singleClickTimeout = useRef<NodeJS.Timeout | null>(null);
   const { currentConfig } = useSettings();
   const [loading, setLoading] = useState(false); // Loading state for request
@@ -46,11 +47,25 @@ export default function ChatbotPage() {
 
   const mutation = useMutation({
     mutationFn: deleteAllChats,
-    onSuccess: () => rq.invalidateQueries({ queryKey: ["chatbot", id] }),
+    onSuccess: async () => {
+      await rq.invalidateQueries({ queryKey: ["chatbot", id] });
+    },
   });
 
+  const scrollToBottom = useCallback(() => {
+    if (messageEl.current) {
+      // @ts-ignore
+      messageEl.current.scrollTop = messageEl.current.scrollHeight;
+    }
+  }, []);
+
+  useEffect(() => {
+    scrollToBottom();
+  }, [data?.chats, scrollToBottom]);
+
   async function onSubmit(values: z.infer<typeof messageSchema>) {
     try {
+      if (!values.query.trim()) return;
       if (currentConfig == null) {
         toast.error("Please Select AI engine in settings");
         return;
@@ -140,7 +155,11 @@ export default function ChatbotPage() {
       </div>
       <Separator className="my-0" />
 
-      <div className="flex-1 overflow-y-auto p-6 space-y-6 h-full no-scrollbar">
+      <div
+        id="content"
+        ref={messageEl}
+        className="flex-1 overflow-y-auto p-6 space-y-6 h-full no-scrollbar"
+      >
         {data ? (
           <>
             {data.chats.map((chat) => (

client/src/pages/Imagine.tsx

@@ -1,5 +1,11 @@
 import Separator from "@/components/Separator";
 import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+} from "@/components/ui/card";
 import {
   Form,
   FormControl,
@@ -15,7 +21,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import axios from "axios";
 import { ArrowLeft, Download, Loader2, SendIcon } from "lucide-react";
-import { useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useForm } from "react-hook-form";
 import toast from "react-hot-toast";
 import { Link } from "react-router-dom";
@@ -26,6 +32,7 @@ export default function ImaginePage() {
     queryKey: ["images"],
     queryFn: fetchImagesData,
   });
+  const messageEl = useRef(null);
   const [loading, setLoading] = useState(false); // Loading state for request
   const rq = useQueryClient();
   const form = useForm<z.infer<typeof messageSchema>>({
@@ -35,6 +42,17 @@ export default function ImaginePage() {
     },
   });
 
+  const scrollToBottom = useCallback(() => {
+    if (messageEl.current) {
+      // @ts-ignore
+      messageEl.current.scrollTop = messageEl.current.scrollHeight;
+    }
+  }, []);
+
+  useEffect(() => {
+    scrollToBottom();
+  }, [data, scrollToBottom]);
+
   async function onSubmit(values: z.infer<typeof messageSchema>) {
     try {
       const token = localStorage.getItem("token");
@@ -86,7 +104,10 @@ export default function ImaginePage() {
       </div>
       <Separator className="my-0" />
 
-      <div className="flex-1 overflow-y-auto p-6 space-y-6 h-full no-scrollbar">
+      <div
+        ref={messageEl}
+        className="flex-1 overflow-y-auto p-6 space-y-6 h-full no-scrollbar"
+      >
         {!data ? (
           <Loading />
         ) : (
@@ -98,28 +119,35 @@ export default function ImaginePage() {
             )}
             {data.map((image) => (
               <>
-                <div className="flex justify-start items-center space-x-2 mb-2">
-                  <div className="max-w-md bg-white dark:bg-dark dark:text-dark/90 text-gray-900 rounded-xl p-4 drop-shadow-md shadow border border-gray-100 dark:border-darker flex flex-col">
-                    <img
-                      className="rounded-md"
-                      src={imageSrc(image.prompt)}
-                      alt={image.prompt}
-                    />
-                    <p className="text-center mt-2">{image.prompt}</p>
-                    <div className="flex justify-between mt-2">
-                      <a
-                        type="button"
-                        className="bg-blue-500 hover:bg-blue-600 text-white rounded-full p-2 drop-shadow transition duration-200 flex items-center justify-center download-btn"
-                        title="Download"
-                        target="_blank"
-                        href={imageSrc(image.prompt)}
-                        download
-                      >
-                        <Download />
-                      </a>
+                <Card className="w-full max-w-sm overflow-hidden">
+                  <CardHeader className="p-0">
+                    <div className="relative aspect-square">
+                      <img
+                        src={imageSrc(image.prompt)}
+                        alt={image.prompt}
+                        className="rounded-t-lg"
+                      />
                     </div>
-                  </div>
-                </div>
+                  </CardHeader>
+                  <CardContent className="p-4">
+                    <p className="text-sm text-muted-foreground mb-4">
+                      {image.prompt}
+                    </p>
+                  </CardContent>
+                  <CardFooter className="p-4 pt-0 flex justify-between">
+                    <a
+                      title="Download"
+                      download
+                      target="_blank"
+                      href={imageSrc(image.prompt)}
+                    >
+                      <Button variant="ghost" size="sm">
+                        <Download className="h-4 w-4 mr-2" />
+                        Download
+                      </Button>
+                    </a>
+                  </CardFooter>
+                </Card>
               </>
             ))}
           </>