From 2256c5274e235b07057b6da699ca4b99b628f5bf Mon Sep 17 00:00:00 2001
From: DVHcoding <dohung2ka3@gmail.com>
Date: Wed, 19 Mar 2025 23:26:27 +0700
Subject: [PATCH] feat: background toolbar, show & hide toolbars

---
 src/App.css         | 17 ++++++++---
 src/App.tsx         | 72 ++++++++++++++++++++++++++++++++++-----------
 src/bubble.css      |  8 +++--
 src/bubble.tsx      | 47 +++++++++++++++++++++++++++--
 src/index.css       | 11 ++++---
 src/use-messages.ts |  2 +-
 6 files changed, 124 insertions(+), 33 deletions(-)

diff --git a/src/App.css b/src/App.css
index 841f0a3..7a75f26 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,5 +1,4 @@
 .App {
-  background-color: #00a000;
   width: 100vw;
   height: 100vh;
   display: flex;
@@ -8,7 +7,17 @@
 }
 
 .picker {
-  position: fixed!important;
-  top: 0;
+  display: flex;
+  gap: 10px;
+  position: fixed !important;
   right: 0;
-}
\ No newline at end of file
+  top: -20px;
+}
+
+.toggle-toolbars {
+  color: #fff;
+  position: fixed;
+  top: 0;
+  right: 5px;
+  z-index: 100;
+}
diff --git a/src/App.tsx b/src/App.tsx
index da07d93..95cd1c6 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -6,13 +6,13 @@ import BubbleInput from './bubble-input'
 import Chat from './chat'
 import useMessages from './use-messages'
 import { SketchPicker } from 'react-color'
-import React from 'react'
-
 function App() {
   const [messages, addMessage] = useMessages([])
   const [newMessage, setNewMessage] = useState('')
   const [fillColour, setFillColour] = useState('#eee')
   const [strokeColour, setStrokeColour] = useState('#000')
+  const [backgroundColour, setBackgroudColour] = useState('#00a000')
+  const [isChecked, setIsChecked] = useState(false)
 
   const handleSubmit = useCallback(
     (bubbleHeight: number) => {
@@ -29,24 +29,44 @@ function App() {
   )
 
   const handleFillColourChange = (color: { hex: string }) => {
-    setFillColour(color.hex);
-      console.log(color);
-  };
+    setFillColour(color.hex)
+    console.log(color)
+  }
 
   const handleStrokeColourChange = (color: { hex: string }) => {
-    setStrokeColour(color.hex);
-      console.log(color);
-  };
+    setStrokeColour(color.hex)
+    console.log(color)
+  }
+
+  const handleBackgroundColourChange = (color: { hex: string }) => {
+    setBackgroudColour(color.hex)
+  }
 
   const lastMessage = messages[messages.length - 1]
   const dy = lastMessage ? lastMessage.height : 0
 
   return (
-    <div className="App">
+    <div className="App" style={{ backgroundColor: backgroundColour }}>
+      <label className="toggle-toolbars">
+        <input
+          type="checkbox"
+          checked={isChecked}
+          onChange={() => setIsChecked(!isChecked)}
+        />
+        {isChecked ? 'Show Toolbars' : 'Hide Toolbars'}
+      </label>
+
       <Chat>
         <AnimatePresence>
           {messages.map(m => (
-            <Bubble key={m.id} id={m.id} dy={dy} fillColour={fillColour} strokeColour={strokeColour}>
+            <Bubble
+              backgroundColor={backgroundColour}
+              key={m.id}
+              id={m.id}
+              dy={dy}
+              fillColour={fillColour}
+              strokeColour={strokeColour}
+            >
               {m.text}
             </Bubble>
           ))}
@@ -59,13 +79,31 @@ function App() {
           strokeColour={strokeColour}
         />
       </Chat>
-      
-      <div className="picker">
-        <p>Fill</p>
-        <SketchPicker color={fillColour} onChange={handleFillColourChange}/>
-        <p>Stroke</p>
-        <SketchPicker color={strokeColour} onChange={handleStrokeColourChange}/>
-      </div>
+
+      {!isChecked && (
+        <div className="picker">
+          <div>
+            <p>Background</p>
+            <SketchPicker
+              color={backgroundColour}
+              onChange={handleBackgroundColourChange}
+            />
+          </div>
+
+          <div>
+            <p>Fill</p>
+            <SketchPicker
+              color={fillColour}
+              onChange={handleFillColourChange}
+            />
+            <p>Stroke</p>
+            <SketchPicker
+              color={strokeColour}
+              onChange={handleStrokeColourChange}
+            />
+          </div>
+        </div>
+      )}
     </div>
   )
 }
diff --git a/src/bubble.css b/src/bubble.css
index b7a4f9a..053afff 100644
--- a/src/bubble.css
+++ b/src/bubble.css
@@ -32,15 +32,19 @@
   border-bottom-right-radius: 20px;
 }
 
+.bubble-content::after {
+  background-color: #00a000;
+}
+
 .bubble:last-child .bubble-content:after,
 .bubble:nth-last-child(2) .bubble-content:after {
-  background: #00a000!important;
   border-bottom-right-radius: 15px;
   bottom: 0;
-  content: "";
+  content: '';
   height: 27px;
   left: -15px;
   position: absolute;
   width: 15px;
   z-index: 1;
+  overflow: hidden;
 }
diff --git a/src/bubble.tsx b/src/bubble.tsx
index ecd8af9..4c54945 100644
--- a/src/bubble.tsx
+++ b/src/bubble.tsx
@@ -1,5 +1,5 @@
 import { motion, usePresence } from 'framer-motion'
-import React from 'react'
+import React, { useLayoutEffect } from 'react'
 import './bubble.css'
 
 const transition = {
@@ -17,9 +17,17 @@ interface BubbleProps {
   children: React.ReactNode
   fillColour: string
   strokeColour: string
+  backgroundColor: string
 }
 
-const Bubble = ({ id, children, dy, fillColour, strokeColour }: BubbleProps) => {
+const Bubble = ({
+  id,
+  children,
+  dy,
+  fillColour,
+  strokeColour,
+  backgroundColor
+}: BubbleProps) => {
   const [isPresent, safeToRemove] = usePresence()
 
   const animations = {
@@ -35,10 +43,43 @@ const Bubble = ({ id, children, dy, fillColour, strokeColour }: BubbleProps) =>
     transition
   }
 
+  useLayoutEffect(() => {
+    const bubbleContent = document.querySelector('.bubble-content')
+    if (bubbleContent) {
+      const styleSheet = document.styleSheets[0] as CSSStyleSheet
+      styleSheet.insertRule(
+        `
+        .bubble-content::after {
+          background-color: ${backgroundColor} !important;
+        }
+      `,
+        styleSheet.cssRules.length
+      )
+    }
+  }, [backgroundColor])
+
   return (
     <motion.div key={id} className="bubble" {...animations}>
       <div style={{ position: 'static' }}>
-        <div className="bubble-content" style={{backgroundColor: fillColour, color: strokeColour}}>{children}</div>
+        <style>{`
+        .bubble:last-child .bubble-content:after,
+        .bubble:nth-last-child(2) .bubble-content:after {
+          background: ${backgroundColor} !important;
+        }
+        
+
+        
+        `}</style>
+
+        <div
+          className="bubble-content"
+          style={{
+            backgroundColor: fillColour,
+            color: strokeColour
+          }}
+        >
+          {children}
+        </div>
       </div>
     </motion.div>
   )
diff --git a/src/index.css b/src/index.css
index 407182f..1c07af9 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,7 +1,7 @@
-:root{
+:root {
   --bubble-background-color: #eee;
   --bubble-color: #000;
-  --background-color: #00a000
+  --background-color: #00a000;
 }
 
 html,
@@ -9,14 +9,13 @@ body,
 #root {
   width: 100vw;
   height: 100vh;
-
 }
 
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   background-color: black;
diff --git a/src/use-messages.ts b/src/use-messages.ts
index cf5a2d7..529cf6e 100644
--- a/src/use-messages.ts
+++ b/src/use-messages.ts
@@ -18,7 +18,7 @@ const useMessages = (initialValue: Array<Message> = []) => {
           n.shift()
           return n
         })
-      }, 15000)
+      }, 5000)
     },
     [setMessages]
   )