refactor: move app directories

frontend/src/routes/conversation.$sessionId.tsx

@@ -0,0 +1,47 @@
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Separator } from "@/components/ui/separator";
+import { getConversationHistory } from "@/services/get-conversation-history";
+import { createFileRoute, notFound } from "@tanstack/react-router";
+import { SendHorizontalIcon } from "lucide-react";
+
+export const Route = createFileRoute("/conversation/$sessionId")({
+  component: RouteComponent,
+  loader: async ({ params }) => {
+    const data = await getConversationHistory(params.sessionId);
+    if (!data) {
+      throw notFound();
+    }
+    return data;
+  },
+});
+
+function RouteComponent() {
+  const historyData = Route.useLoaderData();
+  const { sessionId } = Route.useParams();
+
+  return (
+    <div className="flex justify-center p-3 h-full">
+      <div className="flex flex-col w-xl gap-3">
+        <Card className="flex-1 flex flex-col">
+          <CardHeader>
+            <CardTitle>{historyData.title}</CardTitle>
+            <Separator orientation="horizontal" />
+          </CardHeader>
+          <CardContent className="flex-1 max-h-full">
+            <div className="flex flex-col rounded-sm bg-neutral-50 h-full max-h-full border border-neutral-200 shadow-2xs overflow-y-auto">
+              {/* <div className="w-[150px] h-[3500px] bg-amber-400"></div> */}
+            </div>
+          </CardContent>
+        </Card>
+        <div className="flex gap-3">
+          <Input className="flex-1" placeholder="Start typing..." />
+          <Button size="icon">
+            <SendHorizontalIcon />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/services/get-conversation-history.tsx

@@ -0,0 +1,28 @@
+import { env } from "@/env";
+import type { ConversationHistoryModel } from "@/types/conversation-history-model";
+import { toast } from "sonner";
+
+const getConversationHistory = async (
+  sessionId: string
+): Promise<ConversationHistoryModel | null> => {
+  const url = `${env.VITE_API_URL}/conversation/${sessionId}/history`;
+  try {
+    const response = await fetch(url);
+    if (!response.ok) {
+      toast.error("Failed to retrieve conversation history");
+      return null;
+    }
+    return (await response.json()) as ConversationHistoryModel;
+  } catch (error) {
+    console.error(
+      `Error retrieving conversation history for ${sessionId}`,
+      error
+    );
+    toast.error("Failed to retrieve conversation history");
+    return null;
+  }
+};
+
+getConversationHistory.queryKey = "get-conversation-history";
+
+export { getConversationHistory };

frontend/src/types/conversation-history-model.ts

@@ -0,0 +1,8 @@
+import type { ConversationModel } from "@/types/conversation-model";
+import type { ExchangeModel } from "@/types/exchange-model";
+
+interface ConversationHistoryModel extends ConversationModel {
+  history: ExchangeModel[];
+}
+
+export { type ConversationHistoryModel };

frontend/src/types/conversation-model.ts

@@ -2,8 +2,6 @@ interface ConversationModel {
   session_id: string;
   title: string;
   exchange_count: number;
-  first_question: string;
-  last_question: string;
   created: string;
 }
 

frontend/src/types/exchange-model.ts

@@ -0,0 +1,6 @@
+interface ExchangeModel {
+  question: string;
+  answer: string;
+}
+
+export { type ExchangeModel };

src/frontend/src/routes/conversation.$sessionId.tsx

@@ -1,9 +0,0 @@
-import { createFileRoute } from '@tanstack/react-router'
-
-export const Route = createFileRoute('/conversation/$sessionId')({
-  component: RouteComponent,
-})
-
-function RouteComponent() {
-  return <div>Hello "/conversation/$sessionId"!</div>
-}