Updated suggestion bubbles UI

ScottLogic · Nov 20, 2024 · 770fcf3 · 770fcf3
1 parent ff04d14
commit 770fcf3
Show file tree

Hide file tree

Showing 6 changed files with 177 additions and 31 deletions.
diff --git a/frontend/src/app.module.css b/frontend/src/app.module.css
@@ -3,7 +3,24 @@
   display: flex;
   flex-direction: column;
   height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+  justify-content: flex-start;
+}
+
+.chatContainer {
+  width: 50%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  background-color: #ffffff;
   justify-content: center;
+  border-radius: 24px;
+  margin-top: 12px;
+  margin-bottom: 12px;
+  padding: 4px 24px 24px 24px;
+  overflow: hidden;
 }
 
 .title {

diff --git a/frontend/src/app.tsx b/frontend/src/app.tsx
@@ -22,13 +22,15 @@ export const App = () => {
   return (
     <div className={styles.container}>
       <NavBar startNewConversation={resetMessages} />
-      <Chat messages={messages} waiting={waiting} />
-      <Input
-        key={messages?.[0]?.time}
-        sendMessage={sendMessage}
-        waiting={waiting}
-        suggestions={suggestions}
-      />
+      <div className={styles.chatContainer}>
+        <Chat messages={messages} waiting={waiting} />
+        <Input
+          key={messages?.[0]?.time}
+          sendMessage={sendMessage}
+          waiting={waiting}
+          suggestions={suggestions}
+        />
+      </div>
     </div>
   );
 };
diff --git a/frontend/src/components/chat.module.css b/frontend/src/components/chat.module.css
@@ -8,7 +8,7 @@
   height: 75%;
   margin: 24px 0px 8px 0px;
   overflow-y: auto;
-  width: 52%;
+  width: 100%;
   padding: 0px 12px 0px 12px;
 }
 

diff --git a/frontend/src/components/input.module.css b/frontend/src/components/input.module.css
@@ -1,10 +1,9 @@
 .inputContainer {
   box-sizing: border-box;
   display: flex;
-  justify-content: center;
-  align-items: center;
+  margin: 1rem 0 0 0;
   position: relative;
-  width: 50%;
+  width: 100%;
 }
 
 .parentDiv {

diff --git a/frontend/src/components/suggestions.module.css b/frontend/src/components/suggestions.module.css
@@ -1,20 +1,106 @@
+.container-wrapper {
+  position: relative;
+  display: flex;
+  max-width: 600px;
+  width: 100%;
+  margin: 0 auto;
+  overflow: hidden;
+}
+
+.contentWrapper {
+  position: relative;
+  display: flex;
+  width: 100%;
+  overflow: hidden;
+}
+
 .container {
+  display: grid;
+  grid-auto-flow: column;
+  gap: 16px;
+  overflow-x: auto;
+  position: relative;
   align-items: stretch;
-  display: flex;
-  flex-direction: row;
   width: 100%;
-  justify-content: space-evenly;
+  padding-bottom: 8px;
+}
+
+.container > div {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  background-color: var(--primary);
+  border-radius: 16px;
+  padding: 0;
+  width: 300px;
+  white-space: normal;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+  position: relative;
+}
+
+.container > div > p {
+  background-color: rgb(255 255 255 / 0.8);
+  margin: 0;
+  padding: 8px 16px;
+  border-radius: inherit;
+  font-size: 16px;
+  line-height: 22px;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.container > div > p:hover {
+  background-color: rgb(255 255 255 / 0.65);
+  box-shadow: 0 1px 4px 0 rgb(0 0 0 / 0.2);
   cursor: pointer;
 }
 
-.container > p {
-  background-color: color-mix(
-    in srgb,
-    transparent,
-    var(--text-color-primary) 7%
-  );
-  margin: 15px 5px;
-  padding: 15px;
-  border: 1px solid var(--border-primary);
-  border-radius: 5px;
+.container > div > p:active {
+  background-color: rgb(255 255 255 / 0.4);
+}
+
+.gradient {
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: calc(100% - 13px);
+  width: 12px;
+  background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25));
+  pointer-events: none;
+  transition:
+    opacity 0.2s ease,
+    visibility 0.2s ease;
+}
+
+.gradient.hidden {
+  opacity: 0;
+  visibility: hidden;
+}
+
+.container::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+
+.container::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.5);
+  border-radius: 24px;
+}
+
+.container::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(0, 0, 0, 0.7);
+  cursor: pointer;
+}
+
+.container::-webkit-scrollbar-track {
+  background-color: rgba(0, 0, 0, 0.1);
+  border-radius: 24px;
+}
+
+.decorativeText {
+  font-style: italic;
+  color: var(--grey-700);
+  font-size: 12px;
+  padding: 0;
+  margin-top: 16px;
 }
diff --git a/frontend/src/components/suggestions.tsx b/frontend/src/components/suggestions.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef, useState, useEffect, useCallback } from 'react';
 import styles from './suggestions.module.css';
 
 export interface SuggestionsProps {
@@ -7,13 +7,55 @@ export interface SuggestionsProps {
 }
 
 export const Suggestions = ({ loadPrompt, suggestions }: SuggestionsProps) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [isScrollable, setIsScrollable] = useState(false);
+
+  const checkScrollable = useCallback(() => {
+    const container = containerRef.current;
+    if (container) {
+      const hasOverflow = container.scrollWidth > container.offsetWidth;
+      const isAtEnd =
+        container.scrollLeft + container.offsetWidth >= container.scrollWidth;
+      setIsScrollable(hasOverflow && !isAtEnd);
+    }
+  }, []);
+
+  useEffect(() => {
+    checkScrollable();
+    const handleResize = () => checkScrollable();
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, [checkScrollable]);
+
+  useEffect(() => {
+    checkScrollable();
+  }, [suggestions, checkScrollable]);
+
   return (
-    <div className={styles.container}>
-      {suggestions.map((suggestion, index) => (
-        <p key={index} onClick={() => loadPrompt(suggestion)}>
-          {suggestion}
-        </p>
-      ))}
+    <div>
+      <p className={styles.decorativeText}>Suggested questions</p>
+      <div className={styles.containerWrapper}>
+        <div className={styles.contentWrapper}>
+          <div
+            className={styles.container}
+            ref={containerRef}
+            onScroll={checkScrollable}
+          >
+            {suggestions.map((suggestion, index) => (
+              <div
+                key={index}
+                onClick={() => loadPrompt(suggestion)}
+                className={styles.suggestionItem}
+              >
+                <p>{suggestion}</p>
+              </div>
+            ))}
+          </div>
+          <div
+            className={`${styles.gradient} ${!isScrollable ? styles.hidden : ''}`}
+          ></div>
+        </div>
+      </div>
     </div>
   );
 };