added half iframe

dokmy · Jan 12, 2024 · e3b3968 · e3b3968
1 parent 75a5d05
commit e3b3968
Show file tree

Hide file tree

Showing 6 changed files with 121 additions and 39 deletions.
diff --git a/src/app/(root)/(routes)/results/[searchId]/page.tsx b/src/app/(root)/(routes)/results/[searchId]/page.tsx
@@ -1,7 +1,7 @@
 import { auth } from "@clerk/nextjs";
 import { redirect } from "next/navigation";
 import prismadb from "../../../../lib/prismadb";
-import ChatComponent from "../components/chat-component";
+import ChatComponentsWrapper from "../components/chat-components-wrapper";
 
 type Props = {
   params: {
@@ -43,17 +43,10 @@ const resultsPage = async ({ params: { searchId } }: Props) => {
   });
 
   return (
-    <div className="flex overflow-x-auto h-full">
-      {searchResults.map((result) => (
-        <div key={result.id} className="flex-none w-1/3 border-r h-full">
-          <ChatComponent
-            key={result.id}
-            data={result}
-            query={search_metadata[0].query}
-          />
-        </div>
-      ))}
-    </div>
+    <ChatComponentsWrapper
+      searchResults={searchResults}
+      searchMetadataQuery={search_metadata[0].query}
+    />
   );
 };
 

diff --git a/src/app/(root)/(routes)/results/components/chat-component-ready.tsx b/src/app/(root)/(routes)/results/components/chat-component-ready.tsx
@@ -1,9 +1,10 @@
+"use client";
 import React from "react";
 import ResultCard from "@/components/result-card";
 import ChatMessages from "@/components/chat-messages";
 import { useChat } from "ai/react";
 import { Message } from "ai";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 
 interface ChatComponentReadyProps {
   data: {
@@ -19,6 +20,8 @@ interface ChatComponentReadyProps {
   };
   query: string;
   chatArgs: chatArgs;
+  isIframeShown: boolean;
+  onToggleIframe: () => void;
 }
 
 interface chatArgs {
@@ -27,7 +30,8 @@ interface chatArgs {
 }
 
 const ChatComponentReady: React.FC<ChatComponentReadyProps> = (props) => {
-  const { data, query, chatArgs } = props;
+  const { data, query, chatArgs, isIframeShown, onToggleIframe } = props;
+
   console.log("CCR is here. Here is the real chatArgs: ", chatArgs);
 
   const { messages, input, handleInputChange, handleSubmit } = useChat({
@@ -43,26 +47,41 @@ const ChatComponentReady: React.FC<ChatComponentReadyProps> = (props) => {
   }, [query]);
 
   return (
-    <div className="flex flex-col w-full h-full">
-      <ResultCard data={data} />
-      <ChatMessages key={data.id} messages={messages} />
-      <div>
-        <form
-          onSubmit={handleSubmit}
-          className="mt-1 mb-1 relative p-3 border-t"
-        >
-          <div className="flex-row space-x-2">
-            <input
-              className="resize-none overflow-auto max-h-24 border rounded w-full p-3 pl-3 pr-20 text-gray-200 leading-tight bg-black border-gray-700 duration-200 h-20"
-              value={input}
-              onChange={handleInputChange}
-            ></input>
+    <div
+      className={`flex w-full h-full ${
+        isIframeShown ? "flex-row" : "flex-col"
+      }`}
+    >
+      {isIframeShown && (
+        <iframe
+          src={data.caseUrl}
+          className="w-1/2 h-full"
+          title="Case Details"
+        ></iframe>
+      )}
+
+      <div
+        className={`w-full h-full ${
+          isIframeShown ? "w-1/2" : "w-full"
+        } overflow-y-auto`}
+      >
+        <ResultCard data={data} onReadCaseClick={onToggleIframe} />
+        <ChatMessages key={data.id} messages={messages} />
+        <div className="mb-1 relative p-3 border-t flex-none">
+          <form onSubmit={handleSubmit}>
+            <div className="flex-row space-x-2">
+              <input
+                className="resize-none overflow-auto max-h-24 border rounded w-full p-3 pl-3 pr-20 text-gray-200 leading-tight bg-black border-gray-700 duration-200 h-20"
+                value={input}
+                onChange={handleInputChange}
+              ></input>
 
-            <span className="absolute inset-y-0 right-5 flex items-center pr-3 pointer-events-none text-gray-400">
-              <div className="h-3 w-3">⮐</div>
-            </span>
-          </div>
-        </form>
+              <span className="absolute inset-y-0 right-5 flex items-center pr-3 pointer-events-none text-gray-400">
+                <div className="h-3 w-3">⮐</div>
+              </span>
+            </div>
+          </form>
+        </div>
       </div>
     </div>
   );

diff --git a/src/app/(root)/(routes)/results/components/chat-component.tsx b/src/app/(root)/(routes)/results/components/chat-component.tsx
@@ -18,14 +18,21 @@ interface ChatComponentProps {
     userId: string;
   };
   query: string;
+  isIframeShown: boolean;
+  onToggleIframe: () => void;
 }
 
 interface chatArgs {
   initialInput?: string;
   initialMessages?: Message[];
 }
 
-const ChatComponent: React.FC<ChatComponentProps> = ({ data, query }) => {
+const ChatComponent: React.FC<ChatComponentProps> = ({
+  data,
+  query,
+  isIframeShown,
+  onToggleIframe,
+}) => {
   const [dbMessages, setDbMessages] = useState<null | []>(null);
   const [chatArgs, setChatArgs] = useState<null | chatArgs>(null);
 
@@ -72,7 +79,15 @@ const ChatComponent: React.FC<ChatComponentProps> = ({ data, query }) => {
     return <div>Loading...</div>;
   }
 
-  return <ChatComponentReady data={data} query={query} chatArgs={chatArgs} />;
+  return (
+    <ChatComponentReady
+      data={data}
+      query={query}
+      chatArgs={chatArgs}
+      isIframeShown={isIframeShown}
+      onToggleIframe={onToggleIframe}
+    />
+  );
 };
 
 export default ChatComponent;
diff --git a/src/app/(root)/(routes)/results/components/chat-components-wrapper.tsx b/src/app/(root)/(routes)/results/components/chat-components-wrapper.tsx
@@ -0,0 +1,54 @@
+"use client";
+import React, { useState } from "react";
+import ChatComponent from "./chat-component";
+
+interface SearchResult {
+  id: string;
+  caseName: string;
+  caseNeutralCit: string;
+  caseActionNo: string;
+  caseDate: Date; // or string, if you are using ISO date strings
+  caseUrl: string;
+  createdAt: Date; // or string, for ISO date strings
+  searchId: string;
+  userId: string;
+}
+
+const ChatComponentsWrapper = ({
+  searchResults,
+  searchMetadataQuery,
+}: {
+  searchResults: SearchResult[];
+  searchMetadataQuery: string;
+}) => {
+  const [activeChatId, setActiveChatId] = useState(null);
+
+  const toggleIframe = (chatId: any) => {
+    setActiveChatId(activeChatId === chatId ? null : chatId);
+  };
+
+  return (
+    <div className="flex overflow-x-auto h-full w-full">
+      {searchResults.map((result) => (
+        <div
+          key={result.id}
+          className={`flex-none ${
+            activeChatId === result.id ? "w-full" : "w-1/3"
+          } border-r h-full ${
+            activeChatId !== null && activeChatId !== result.id ? "hidden" : ""
+          }`}
+        >
+          <ChatComponent
+            key={result.id}
+            data={result}
+            query={searchMetadataQuery}
+            isIframeShown={activeChatId === result.id}
+            onToggleIframe={() => toggleIframe(result.id)}
+          />
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default ChatComponentsWrapper;
diff --git a/src/app/components/chat-messages.tsx b/src/app/components/chat-messages.tsx
@@ -21,7 +21,7 @@ export default function Messages({ messages }: { messages: Message[] }) {
   };
 
   return (
-    <div className="flex flex-col bg-gray-700 leading-7 h-full overflow-y-auto ">
+    <div className="flex flex-col bg-gray-700 leading-7 overflow-y-auto">
       {messages.map((msg, index) => (
         <div
           key={index}

diff --git a/src/app/components/result-card.tsx b/src/app/components/result-card.tsx
@@ -19,11 +19,12 @@ interface ResultCardProps {
     searchId: string;
     userId: string;
   };
+  onReadCaseClick: () => void;
 }
 
-const ResultCard: React.FC<ResultCardProps> = ({ data }) => {
+const ResultCard: React.FC<ResultCardProps> = ({ data, onReadCaseClick }) => {
   return (
-    <div className="h-min p-3">
+    <div className="">
       <Accordion type="single" collapsible>
         <AccordionItem value="item-1">
           <AccordionTrigger className="justify-center">
@@ -42,7 +43,7 @@ const ResultCard: React.FC<ResultCardProps> = ({ data }) => {
               </li>
             </ul>
             <div className="flex justify-center items-center mt-3">
-              <Button>Read the case</Button>
+              <Button onClick={onReadCaseClick}>Read the case</Button>
             </div>
           </AccordionContent>
         </AccordionItem>