Continue chat conversation after google login redirect (#34)

src/client/ChatPage.tsx

@@ -0,0 +1,39 @@
+import { useQuery } from "@wasp/queries";
+import getChats from "@wasp/queries/getChats";
+
+import CreateNewChatBtn from "./components/CreateNewChat";
+import ChatsList from "./components/ChatList";
+import ConversationWrapper from "./components/ConversationWrapper";
+
+export default function ChatPage() {
+  let { data: chats, isLoading: isLoadingChats } = useQuery(getChats);
+
+  return (
+    <div className="relative z-0 flex h-full w-full overflow-hidden h-screen">
+      <div
+        id="default-sidebar"
+        className="md:w-[260px] flex-shrink-0 overflow-x-hidden dark bg-captn-dark-blue"
+        aria-label="Sidebar"
+      >
+        <div
+          style={{ borderRight: "1px solid #eae4d9" }}
+          className="border-x-captn-light-cream h-full px-3 py-4 overflow-y-auto bg-captn-dark-blue"
+        >
+          <CreateNewChatBtn />
+          <div className="flex-col flex-1 transition-opacity duration-500 -mr-2 pr-2 overflow-y-auto">
+            <ul className="py-5 space-y-2 font-medium">
+              {
+                // Todo: remove the below ignore comment
+                // @ts-ignore
+                chats && <ChatsList chats={chats} />
+              }
+            </ul>
+          </div>
+        </div>
+      </div>
+      <div className="relative z-0 flex h-full w-full overflow-hidden h-screen bg-captn-light-blue">
+        <ConversationWrapper />
+      </div>
+    </div>
+  );
+}

src/client/components/ChatList.tsx

@@ -0,0 +1,36 @@
+import { Link } from "@wasp/router";
+import type { Chat } from "@wasp/entities";
+
+export default function ChatsList(chats: Chat[]) {
+  return (
+    <div>
+      {
+        // Todo: remove the below ignore comment
+        // @ts-ignore
+        chats.chats.map((chat, idx) => (
+          <Link key={chat.id} to="/chat/:id?" params={{ id: chat.id }}>
+            <li key={idx}>
+              <div className="flex items-center p-2 text-white hover:bg-captn-light-blue hover:text-captn-dark-blue group rounded-lg ">
+                <svg
+                  stroke="currentColor"
+                  fill="none"
+                  strokeWidth="2"
+                  viewBox="0 0 24 24"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  className="icon-sm"
+                  height="1em"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
+                </svg>
+                <span className="ml-3">{chat.id}</span>
+              </div>
+            </li>
+          </Link>
+        ))
+      }
+    </div>
+  );
+}

src/client/components/ConversationList.tsx

@@ -0,0 +1,85 @@
+import Markdown from "markdown-to-jsx";
+
+import type { Conversation } from "@wasp/entities";
+
+import logo from "../static/captn-logo.png";
+
+export default function ConversationsList(conversations: Conversation[]) {
+  return (
+    <div className="w-full">
+      {
+        // Todo: remove the below ignore comment
+        // @ts-ignore
+        conversations.conversations.map((conversation, idx) => {
+          const conversationBgColor =
+            conversation.role === "user"
+              ? "captn-light-blue"
+              : "captn-dark-blue";
+          const conversationTextColor =
+            conversation.role === "user"
+              ? "captn-dark-blue"
+              : "captn-light-cream";
+          const conversationLogo =
+            conversation.role === "user" ? (
+              <div
+                style={{
+                  alignItems: "center",
+                  background: "#fff",
+                  borderRadius: "50%",
+                  color: "#444654",
+                  display: "flex",
+                  flexBasis: "40px",
+                  flexGrow: "0",
+                  flexShrink: "0",
+                  fontSize: "14px",
+                  height: "40px",
+                  justifyContent: "center",
+                  padding: "5px",
+                  position: "relative",
+                  width: "40px",
+                }}
+                className="flex"
+              >
+                <div>You</div>
+              </div>
+            ) : (
+              <img
+                alt="captn logo"
+                src={logo}
+                className="w-full h-full"
+                style={{ borderRadius: "50%" }}
+              />
+            );
+          return (
+            <div key={idx}>
+              <div
+                style={{ minHeight: "85px" }}
+                className={`flex items-center px-5 py-2 group bg-${conversationBgColor}`}
+              >
+                <div
+                  style={{ maxWidth: "840px", margin: "auto" }}
+                  className={`relative ml-3 block w-full p-4 pl-10 text-sm text-${conversationTextColor}  border-${conversationBgColor} rounded-lg bg-${conversationBgColor} `}
+                >
+                  <span
+                    className="absolute inline-block"
+                    style={{
+                      left: "-15px",
+                      top: "6px",
+                      height: " 45px",
+                      width: "45px",
+                    }}
+                  >
+                    {conversationLogo}
+                  </span>
+                  <div className="chat-conversations text-base flex flex-col gap-2">
+                    <Markdown>{conversation.content}</Markdown>
+                  </div>
+                </div>
+              </div>
+            </div>
+          );
+        })
+      }
+    </div>
+  );
+}