frontend: working on chat page

zettelkasten-front/src/assets/icons/StopIcon.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+export function StopIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      fill="currentColor"
+      className="bi bi-stop-fill"
+      viewBox="0 0 16 16"
+    >
+      <path d="M5 3.5h6A1.5 1.5 0 0 1 12.5 5v6a1.5 1.5 0 0 1-1.5 1.5H5A1.5 1.5 0 0 1 3.5 11V5A1.5 1.5 0 0 1 5 3.5" />
+    </svg>
+  );
+}

zettelkasten-front/src/components/Sidebar.tsx

@@ -175,7 +175,7 @@ export function Sidebar() {
             />
             {import.meta.env.VITE_FEATURE_CHAT === "true" ? (
               <SidebarLink
-                to="/app/files"
+                to="/app/chat"
                 children={[
                   <span className="mx-2">
                     <ChatIcon />

zettelkasten-front/src/components/chat/AssistantMessage.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+
+interface AssistantMessageProps {
+  message: string;
+}
+export function AssistantMessage({ message }: AssistantMessageProps) {
+  return (
+    <div>
+      <div className="flex flex-col gap-1 p-4 mx-20">
+        <div className="flex items-center gap-2">
+          <h2 className="text-lg font-semibold text-gray-800">Zettelgarden</h2>
+        </div>
+        <div className="text-gray-600 mx-4">
+          {message}
+        </div>
+      </div>
+    </div>
+  );
+}

zettelkasten-front/src/components/chat/ChatPage.tsx

@@ -0,0 +1,61 @@
+import React, { useState, useEffect, KeyboardEvent, ChangeEvent } from "react";
+import { StopIcon } from "../../assets/icons/StopIcon";
+
+import { AssistantMessage } from "./AssistantMessage";
+import { UserMessage } from "./UserMessage";
+
+interface ChatPageProps {}
+
+export function ChatPage({}: ChatPageProps) {
+  const [query, setQuery] = useState("");
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  function handleSearchUpdate(e: ChangeEvent<HTMLInputElement>) {
+    setQuery(e.target.value);
+  }
+  function handleQuery() {
+    setIsLoading(true);
+  }
+
+  function handleStop() {}
+
+  return (
+    <div>
+      <AssistantMessage message="hello world" />
+      <UserMessage
+        message={
+          "I want you to work on another component now. it should look something"
+        }
+      />
+      <div className="flex items-center gap-2 bg-gray-50 rounded-lg px-4 py-3">
+        <button
+          className="text-gray-400 hover:text-gray-600"
+          onClick={handleQuery}
+        >
+          +
+        </button>
+        <input
+          className="w-full bg-transparent border-none outline-none text-gray-700 placeholder-gray-500"
+          type="text"
+          id="title"
+          value={query}
+          placeholder="How can I help you today?"
+          onChange={handleSearchUpdate}
+          onKeyPress={(event: KeyboardEvent<HTMLInputElement>) => {
+            if (event.key === "Enter") {
+              handleQuery();
+            }
+          }}
+        />
+        {isLoading && (
+          <button
+            className="bg-black text-white rounded-full h-8 w-8 flex items-center justify-center text-sm font-medium hover:bg-gray-800"
+            onClick={handleStop}
+          >
+            <StopIcon />
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}

zettelkasten-front/src/components/chat/UserMessage.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+interface UserMessageProps {
+  message: string;
+}
+
+export function UserMessage({ message }: UserMessageProps) {
+  return (
+    <div>
+      <div className="bg-gray-50 rounded-lg p-4 my-4 ml-40">
+        <p className="text-gray-700">{message}</p>
+      </div>
+    </div>
+  );
+}

zettelkasten-front/src/pages/MainApp.tsx

@@ -14,7 +14,7 @@ import { BillingSuccess } from "./BillingSuccess";
 import { BillingCancelled } from "./BillingCancelled";
 import { SubscriptionPage } from "./SubscriptionPage";
 import { DashboardPage } from "./DashboardPage";
-import { FlashcardNextPage } from "./flashcards/FlashcardNextPage";
+import { ChatPage } from "../components/chat/ChatPage";
 
 import { Card, PartialCard } from "../models/Card";
 import { TaskPage } from "./tasks/TaskPage";
@@ -103,6 +103,7 @@ function MainAppContent() {
                 <Route path="settings" element={<UserSettingsPage />} />
                 <Route path="files" element={<FileVault />} />
                 <Route path="tasks" element={<TaskPage />} />
+                <Route path="chat" element={<ChatPage />} />
                 <Route path="*" element={<DashboardPage />} />
               </>
             ) : (