From 364f128f1d24d1a57f25f57dc30694d17a8f7519 Mon Sep 17 00:00:00 2001 From: Serena Date: Wed, 27 Mar 2024 03:09:37 -0400 Subject: [PATCH] ui stuff (floating button etc) --- frontend/src/app/chaticon.png | Bin 0 -> 9540 bytes frontend/src/app/page.module.css | 154 +++++++++++++++++++++++++++++-- frontend/src/app/page.tsx | 68 ++++++++++---- 3 files changed, 194 insertions(+), 28 deletions(-) create mode 100644 frontend/src/app/chaticon.png diff --git a/frontend/src/app/chaticon.png b/frontend/src/app/chaticon.png new file mode 100644 index 0000000000000000000000000000000000000000..a5cb538c05828713a2e77b4f07599782c6ffe797 GIT binary patch literal 9540 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 I-sa{11N07}E&u=k literal 0 HcmV?d00001 diff --git a/frontend/src/app/page.module.css b/frontend/src/app/page.module.css index ae174216d..7cfdeb761 100644 --- 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,14 +11,78 @@ 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 { @@ -26,12 +90,12 @@ 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,7 +180,7 @@ padding: 0.6rem 1rem; border: none; border-radius: 18px; - background-color: #007aff; + background-color: #468ff2; color: white; cursor: pointer; } @@ -123,7 +188,76 @@ /* 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 index 9f27d28ae..2599f66f1 100644 --- 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; }; }) => { 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 ( -
-
- {messages.map((m) => ( -
- {m.content} + <> + + + {chatVisible && ( +
+
+ BluebookAI Assistant +
+
+ {messages.map((m) => ( +
+ {m.content} +
+ ))} + {isTyping && ( +
+ + +
- ))} + )} +
+
+ + +
-
- - -
-
+ )} + ); }