ui stuff (floating button etc)

yale-swe · Mar 27, 2024 · 364f128 · 364f128
1 parent 2ddb4e4
commit 364f128
Show file tree

Hide file tree

Showing 3 changed files with 194 additions and 28 deletions.
diff --git a/frontend/src/app/chaticon.png b/frontend/src/app/chaticon.png
diff --git a/frontend/src/app/page.module.css b/frontend/src/app/page.module.css
@@ -1,4 +1,4 @@
-.chatContainer {
+/* .chatContainer {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -11,27 +11,91 @@
   background-color: #f9f9f9;
   box-shadow: 0 8px 24px rgba(0,0,0,0.15);
   overflow: hidden;
+} */
+
+.floatingChatButton {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  width: 50px; 
+  height: 50px; 
+  padding: 10px 15px;
+  border-radius: 50%;
+  background-color: #468ff2;
+  background-image: url('chaticon.png'); 
+  background-repeat: no-repeat;
+  background-position: center; 
+  background-size: 40%; 
+  color: white;
+  border: none;
+  cursor: pointer;
+  box-shadow: 2px 2px 10px rgb(0 0 0 / 20%);
+  z-index: 1200;
+}
+
+.chatContainer {
+  display: none;
+  position: fixed;
+  bottom: 20px; 
+  right: 80px;
+  width: 350px;
+  height: 450px; 
+  background: var(--color-surface);
+  border: 2px solid var(--color-border);
+  box-shadow: 0 0 10px 10px rgb(0 0 0 / 20%);
+  overflow-y: auto;
+  /* padding: 10px; */
+  border-radius: 10px;
+  /* overflow: hidden; */
+  z-index: 1100;
+  transition:
+    right 0.5s ease-in-out,
+    bottom 0.5s ease-in-out;
+}
+
+.chatHeader {
+  background: #468ff2;
+  color: white; 
+  font-size: 17px;
+  padding: 10px 15px;
+  margin: 0;
+  border-top-left-radius: 10px; 
+  border-top-right-radius: 10px; 
+  text-align: left;
+  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
+}
+
+.chatContainer > :first-child {
+  margin-top: 0;
+}
+
+.chatVisible {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: stretch;
 }
 
 .messages {
   display: flex;
   flex-direction: column;
   overflow-y: auto;
-  padding: 0.5rem;
+  padding: 1rem;
   margin-bottom: 1rem;
+  font-size: 0.8rem;
 }
 
 .message {
   display: flex;
   flex-direction: column;
   word-wrap: break-word;
   padding: 0.5rem 1rem;
-  margin: 0.5rem 0;
+  /* margin: 0.5rem 0; */
   background-color: #e5e5ea;
   align-self: flex-start;
   max-width: fit-content;
   position: relative;
-  margin-bottom: 15px;
+  margin-bottom: 0.5rem;
   line-height: 24px;
   border-radius: 25px;
 }
@@ -70,7 +134,7 @@
   left: -10px;
   width: 10px;
   height: 20px;
-  background-color: #f9f9f9;
+  background-color: white;
   border-bottom-right-radius: 10px;
 }
 
@@ -93,20 +157,21 @@
   right: -10px;
   width: 10px;
   height: 20px;
-  background-color: #f9f9f9;
+  background-color: white;
   border-bottom-left-radius: 10px;
 }
 
 .inputForm {
   display: flex;
   padding: 0.5rem;
-  background: #f9f9f9;
+  background: white;
 }
 
 .inputField {
   flex-grow: 1;
   padding: 0.6rem 1rem;
   margin-right: 0.5rem;
+  background-color: #f9f9f9;
   border: 1px solid #ccc;
   border-radius: 18px;
 }
@@ -115,15 +180,84 @@
   padding: 0.6rem 1rem;
   border: none;
   border-radius: 18px;
-  background-color: #007aff;
+  background-color: #468ff2;
   color: white;
   cursor: pointer;
 }
 
 /* responsive adjustments */
 @media (max-width: 768px) {
   .chatContainer {
-    width: 90%;
-    height: 80vh;
+    width: 100%; /* full width for smaller screens */
+    bottom: 0;
+    right: 0;
+    height: 50%;
+  }
+}
+
+.typing-indicator {
+  background-color: #E6E7ED;
+  will-change: transform;
+  width: auto;
+  border-radius: 50px;
+  padding: 20px;
+  display: table;
+  margin: 0 auto;
+  position: relative;
+  animation: 2s bulge infinite ease-out;
+}
+
+.typing-indicator::before,
+.typing-indicator::after {
+  content: '';
+  position: absolute;
+  bottom: -2px;
+  left: -2px;
+  height: 20px;
+  width: 20px;
+  border-radius: 50%;
+  background-color: #E6E7ED;
+}
+
+.typing-indicator::after {
+  height: 10px;
+  width: 10px;
+  left: -10px;
+  bottom: -10px;
+}
+
+.typing-indicator span {
+  height: 15px;
+  width: 15px;
+  float: left;
+  margin: 0 1px;
+  background-color: #9E9EA1;
+  display: block;
+  border-radius: 50%;
+  opacity: 0.4;
+  animation: blink 1s infinite;
+}
+
+.typing-indicator span:nth-of-type(1) {
+  animation-delay: 0.3333s;
+}
+
+.typing-indicator span:nth-of-type(2) {
+  animation-delay: 0.6666s;
+}
+
+.typing-indicator span:nth-of-type(3) {
+  animation-delay: 0.9999s;
+}
+
+@keyframes blink {
+  50% {
+    opacity: 1;
+  }
+}
+
+@keyframes bulge {
+  50% {
+    transform: scale(1.05);
   }
 }
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
@@ -4,8 +4,10 @@ import React, { useState } from 'react';
 import styles from '/Users/tselmegulammandakh/Downloads/cpsc439/s24-bluebook-ai/frontend/src/app/page.module.css'; // change to ur own directory
 
 export default function Chat() {
+  const [isTyping, setIsTyping] = useState(false);
   const [input, setInput] = useState('');
   const [messages, setMessages] = useState([{ id: 'welcome-msg', content: 'How may I help you?', role: 'ai' }]);
+  const [chatVisible, setChatVisible] = useState(false);
 
   const handleInputChange = (e: { target: { value: React.SetStateAction<string>; }; }) => {
     setInput(e.target.value);
@@ -17,6 +19,8 @@ export default function Chat() {
     // add the user's message to the chat.
     const newUserMessage = { id: `user-${Date.now()}`, content: input, role: 'user' };
     setMessages(messages => [...messages, newUserMessage]);
+
+    setIsTyping(true);
 
     const response = await fetch('http://127.0.0.1:8000/chat', {
       method: 'POST',
@@ -26,7 +30,9 @@ export default function Chat() {
       // body: JSON.stringify({ message: [{ content: input, role: 'user' }] }),
       body: JSON.stringify({ message: input }),
     });
-
+
+    setIsTyping(false); 
+
     if (response.ok) {
       const data = await response.json();
       // simulateTypingEffect(data.message[0].content, 'ai', `ai-${Date.now()}`);
@@ -65,27 +71,53 @@ export default function Chat() {
 
     typeCharacter();
   };
+
+  const toggleChatVisibility = () => {
+    setChatVisible(!chatVisible);
+  };
 
 
   return (
-    <div className={styles.chatContainer}>
-      <div className={styles.messages}>
-        {messages.map((m) => (
-          <div key={m.id} className={`${styles.message} ${m.role === 'user' ? styles.user : styles.ai}`}>
-            {m.content}
+    <>
+    <button 
+      onClick={toggleChatVisibility} 
+      className={styles.floatingChatButton}
+      aria-label="Toggle Chat"
+    >
+      {}
+    </button>
+
+    {chatVisible && (
+      <div className={`${styles.chatContainer} ${chatVisible ? styles.chatVisible : ''}`}>
+          <div className={styles.chatHeader}>
+            BluebookAI Assistant
+          </div>
+        <div className={styles.messages}>
+          {messages.map((m) => (
+            <div key={m.id} className={`${styles.message} ${m.role === 'user' ? styles.user : styles.ai}`}>
+              {m.content}
+            </div>
+          ))}
+          {isTyping && (
+          <div className={styles.typingIndicator}>
+            <span></span>
+            <span></span>
+            <span></span>
           </div>
-        ))}
+          )}
+        </div>
+        <form onSubmit={handleSubmit} className={styles.inputForm}>
+          <input
+            type="text"
+            className={styles.inputField}
+            value={input}
+            placeholder="Say something..."
+            onChange={handleInputChange}
+          />
+          <button type="submit" className={styles.sendButton}>Send</button>
+        </form>
       </div>
-      <form onSubmit={handleSubmit} className={styles.inputForm}>
-        <input
-          type="text"
-          className={styles.inputField}
-          value={input}
-          placeholder="Say something..."
-          onChange={handleInputChange}
-        />
-        <button type="submit" className={styles.sendButton}>Send</button>
-      </form>
-    </div>
+    )}
+    </>
   );
 }