apps/web/app/(dash)/chat/chatWindow.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

"use client";

import { AnimatePresence } from "framer-motion";
import React, { useEffect, useState } from "react";
import QueryInput from "../home/queryinput";
import { cn } from "@repo/ui/lib/utils";
import { motion } from "framer-motion";
import { useRouter } from "next/navigation";

function ChatWindow({ q }: { q: string }) {
  const [layout, setLayout] = useState<"chat" | "initial">("initial");

  const router = useRouter();

  useEffect(() => {
    if (q !== "") {
      setTimeout(() => {
        setLayout("chat");
      }, 300);
    } else {
      router.push("/home");
    }
  }, [q]);
  return (
    <div>
      <AnimatePresence mode="popLayout">
        {layout === "initial" ? (
          <motion.div
            exit={{ opacity: 0 }}
            key="initial"
            className="max-w-3xl flex mx-auto w-full flex-col"
          >
            <div className="w-full h-96">
              <QueryInput initialQuery={q} initialSpaces={[]} disabled />
            </div>
          </motion.div>
        ) : (
          <div
            className="max-w-3xl flex mx-auto w-full flex-col mt-8"
            key="chat"
          >
            <h2
              className={cn(
                "transition-all transform translate-y-0 opacity-100 duration-500 ease-in-out font-semibold text-2xl",
              )}
            >
              {q}
            </h2>
          </div>
        )}
      </AnimatePresence>
    </div>
  );
}

export default ChatWindow;