Add dynamic backgrounds

package.json

@@ -22,6 +22,7 @@
   },
   "dependencies": {
     "@ant-design/cssinjs": "^1.18.4",
+    "@ctrl/tinycolor": "^4.2.0",
     "@headlessui/react": "^1.7.18",
     "@heroicons/react": "^2.1.1",
     "@langchain/community": "^0.0.41",

src/components/Common/Playground/DocumentChip.tsx

@@ -15,7 +15,7 @@ export const DocumentChip: React.FC<DocumentChipProps> = ({ document }) => {
       href={document.url}
       target="_blank"
       rel="noreferrer"
-      className="inline-flex items-center gap-2 bg-surface-50 dark:bg-[#242424] border border-neutral-200 dark:border-[#2a2a2a] rounded-2xl px-3 py-1.5 mr-2 mb-2">
+      className="inline-flex items-center gap-2 bg-surface-50 dark:bg-surface-900 border border-neutral-200 dark:border-[#2a2a2a] rounded-2xl px-3 py-1.5 mr-2 mb-2">
       <div className="flex items-center gap-2 flex-1 min-w-0">
         <div className="flex-shrink-0">
           {document.favIconUrl ? (

src/components/Common/Playground/Message.tsx

@@ -351,7 +351,7 @@ export const PlaygroundMessage = (props: Props) => {
                         })
                       }
                     }}
-                    className="flex items-center justify-center w-6 h-6 rounded-full bg-surface-100 dark:bg-[#242424] border border-gray-300 dark:border-none hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
+                    className="flex items-center justify-center w-6 h-6 rounded-full bg-surface-100 dark:bg-surface-900 border border-gray-300 dark:border-none hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
                     {!isSpeaking ? (
                       <Volume2Icon className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
                     ) : (
@@ -376,7 +376,7 @@ export const PlaygroundMessage = (props: Props) => {
                         setIsBtnPressed(false)
                       }, 2000)
                     }}
-                    className="flex items-center justify-center w-6 h-6 rounded-full bg-surface-100 dark:bg-[#242424] border border-gray-300 dark:border-none hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
+                    className="flex items-center justify-center w-6 h-6 rounded-full bg-surface-100 dark:bg-surface-900 border border-gray-300 dark:border-none hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
                     {!isBtnPressed ? (
                       <CopyIcon className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
                     ) : (
@@ -395,7 +395,7 @@ export const PlaygroundMessage = (props: Props) => {
                       title={t("generationInfo")}>
                       <button
                         aria-label={t("generationInfo")}
-                        className="flex items-center justify-center w-6 h-6 rounded-full bg-surface-100 dark:bg-[#242424] border border-gray-300 dark:border-none hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
+                        className="flex items-center justify-center w-6 h-6 rounded-full bg-surface-100 dark:bg-surface-900 border border-gray-300 dark:border-none hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
                         <InfoIcon className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
                       </button>
                     </Popover>
@@ -406,7 +406,7 @@ export const PlaygroundMessage = (props: Props) => {
                       <button
                         aria-label={t("regenerate")}
                         onClick={props.onRengerate}
-                        className="flex items-center justify-center w-6 h-6 rounded-full bg-surface-100 dark:bg-[#242424] border border-gray-300 dark:border-none hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
+                        className="flex items-center justify-center w-6 h-6 rounded-full bg-surface-100 dark:bg-surface-900 border border-gray-300 dark:border-none hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
                         <RotateCcw className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
                       </button>
                     </Tooltip>
@@ -417,7 +417,7 @@ export const PlaygroundMessage = (props: Props) => {
                       <button
                         aria-label={t("newBranch")}
                         onClick={props?.onNewBranch}
-                        className="flex items-center justify-center w-6 h-6 rounded-full bg-surface-100 dark:bg-[#242424] border border-gray-300 dark:border-none hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
+                        className="flex items-center justify-center w-6 h-6 rounded-full bg-surface-100 dark:bg-surface-900 border border-gray-300 dark:border-none hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
                         <GitBranchIcon className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
                       </button>
                     </Tooltip>
@@ -428,7 +428,7 @@ export const PlaygroundMessage = (props: Props) => {
                       <button
                         aria-label={t("continue")}
                         onClick={props?.onContinue}
-                        className="flex items-center justify-center w-6 h-6 rounded-full bg-surface-100 dark:bg-[#242424] border border-gray-300 dark:border-none hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
+                        className="flex items-center justify-center w-6 h-6 rounded-full bg-surface-100 dark:bg-surface-900 border border-gray-300 dark:border-none hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
                         <PlayCircle className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
                       </button>
                     </Tooltip>
@@ -440,7 +440,7 @@ export const PlaygroundMessage = (props: Props) => {
                   <button
                     onClick={() => setEditMode(true)}
                     aria-label={t("edit")}
-                    className="flex items-center justify-center w-6 h-6 rounded-full bg-surface-100 dark:bg-[#242424] border border-gray-300 dark:border-none hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
+                    className="flex items-center justify-center w-6 h-6 rounded-full bg-surface-100 dark:bg-surface-900 border border-gray-300 dark:border-none hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
                     <Pen className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
                   </button>
                 </Tooltip>
@@ -449,7 +449,7 @@ export const PlaygroundMessage = (props: Props) => {
           ) : (
             // add invisible div to prevent layout shift
             <div className="invisible">
-              <div className="flex items-center justify-center w-6 h-6 rounded-full bg-surface-100 dark:bg-[#242424] border border-gray-300 dark:border-none hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"></div>
+              <div className="flex items-center justify-center w-6 h-6 rounded-full bg-surface-100 dark:bg-surface-900 border border-gray-300 dark:border-none hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"></div>
             </div>
           )}
         </div>

src/components/Common/Playground/PlaygroundUserMessage.tsx

@@ -96,7 +96,7 @@ export const PlaygroundUserMessageBubble: React.FC<Props> = (props) => {
         <div
           dir="auto"
           data-is-not-editable={!editMode}
-          className={`message-bubble bg-surface-50 dark:bg-[#242424] rounded-3xl prose dark:prose-invert break-words text-primary min-h-7 prose-p:opacity-95 prose-strong:opacity-100 bg-foreground border border-input-border max-w-[100%] sm:max-w-[90%] px-4 py-2.5 rounded-br-lg dark:border-[#2a2a2a] ${
+          className={`message-bubble bg-surface-50 dark:bg-surface-900 rounded-3xl prose dark:prose-invert break-words text-primary min-h-7 prose-p:opacity-95 prose-strong:opacity-100 bg-foreground border border-input-border max-w-[100%] sm:max-w-[90%] px-4 py-2.5 rounded-br-lg dark:border-[#2a2a2a] ${
             props.message_type && !editMode ? "italic" : ""
           }`}>
           <HumanMessage message={props.message} />
@@ -161,7 +161,7 @@ export const PlaygroundUserMessageBubble: React.FC<Props> = (props) => {
                     })
                   }
                 }}
-                className="flex items-center justify-center w-6 h-6 rounded-full bg-surface-100 dark:bg-[#242424] hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
+                className="flex items-center justify-center w-6 h-6 rounded-full bg-surface-100 dark:bg-surface-900 hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
                 {!isSpeaking ? (
                   <PlayIcon className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
                 ) : (
@@ -181,7 +181,7 @@ export const PlaygroundUserMessageBubble: React.FC<Props> = (props) => {
                     setIsBtnPressed(false)
                   }, 2000)
                 }}
-                className="flex items-center justify-center w-6 h-6 rounded-full bg-surface-50 dark:bg-[#242424] hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
+                className="flex items-center justify-center w-6 h-6 rounded-full bg-surface-50 dark:bg-surface-900 hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
                 {!isBtnPressed ? (
                   <CopyIcon className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
                 ) : (
@@ -196,7 +196,7 @@ export const PlaygroundUserMessageBubble: React.FC<Props> = (props) => {
               <button
                 onClick={() => setEditMode(true)}
                 aria-label={t("edit")}
-                className="flex items-center justify-center w-6 h-6 rounded-full bg-surface-50 dark:bg-[#242424] hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
+                className="flex items-center justify-center w-6 h-6 rounded-full bg-surface-50 dark:bg-surface-900 hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
                 <Pen className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
               </button>
             </Tooltip>
@@ -205,7 +205,7 @@ export const PlaygroundUserMessageBubble: React.FC<Props> = (props) => {
       ) : (
         // add invisible div to prevent layout shift
         <div className="invisible">
-          <div className="flex items-center justify-center w-6 h-6 rounded-full bg-surface-50 dark:bg-[#242424] hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"></div>
+          <div className="flex items-center justify-center w-6 h-6 rounded-full bg-surface-50 dark:bg-surface-900 hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"></div>
         </div>
       )}
     </div>

src/components/Option/Playground/Playground.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useState } from "react"
 import { PlaygroundForm } from "./PlaygroundForm"
 import { PlaygroundChat } from "./PlaygroundChat"
 import { useMessageOption } from "@/hooks/useMessageOption"
@@ -15,6 +15,9 @@ import { ChevronDown } from "lucide-react"
 import { useStorage } from "@plasmohq/storage/hook"
 import { Storage } from "@plasmohq/storage"
 import { otherUnsupportedTypes } from "../Knowledge/utils/unsupported-types"
+import { useTheme } from "@/hooks/useTheme"
+
+
 export const Playground = () => {
   const drop = React.useRef<HTMLDivElement>(null)
   const [dropedFile, setDropedFile] = React.useState<File | undefined>()
@@ -25,6 +28,8 @@ export const Playground = () => {
     })
   })
 
+  const { themeName, getThemedSVGUri } = useTheme();
+
   const {
     selectedKnowledge,
     messages,
@@ -38,10 +43,20 @@ export const Playground = () => {
   const { containerRef, isAutoScrollToBottom, autoScrollToBottom } =
     useSmartScroll(messages, streaming, 120)
 
+  const [backgroundImage, setBackgroundImage] = useState(null);
+
   const [dropState, setDropState] = React.useState<
     "idle" | "dragging" | "error"
   >("idle")
 
+   React.useEffect(() => {
+    async function loadBackground() {
+      setBackgroundImage(getThemedSVGUri());
+    }
+    loadBackground();
+  }, [themeName]);
+
+
   React.useEffect(() => {
     if (selectedKnowledge) {
       return
@@ -162,6 +177,12 @@ export const Playground = () => {
 
       <div
         ref={containerRef}
+        style={{
+          height: '100vh',
+          backgroundImage: backgroundImage ? `url("${backgroundImage}")` : 'none',
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+        }}
         className="custom-scrollbar flex h-full w-full flex-col items-center overflow-x-hidden overflow-y-auto px-5 relative z-10">
         <PlaygroundChat />
       </div>