v2 initial commit

2024-02-01 13:40:44 +05:30
parent 43439e5511
commit 0aa4aefb08
95 changed files with 13517 additions and 16778 deletions
--- a/src/components/Common/Playground/Message.tsx
+++ b/src/components/Common/Playground/Message.tsx
@@ -0,0 +1,78 @@
+import {
+  CheckIcon,
+  ClipboardIcon,
+} from "@heroicons/react/24/outline"
+import Markdown from "../../Common/Markdown"
+import React from "react"
+
+type Props = {
+  message: string
+  hideCopy?: boolean
+  botAvatar?: JSX.Element
+  userAvatar?: JSX.Element
+  isBot: boolean
+}
+
+export const PlaygroundMessage = (props: Props) => {
+  const [isBtnPressed, setIsBtnPressed] = React.useState(false)
+
+  React.useEffect(() => {
+    if (isBtnPressed) {
+      setTimeout(() => {
+        setIsBtnPressed(false)
+      }, 4000)
+    }
+  }, [isBtnPressed])
+
+  return (
+    <div
+      className={`group w-full text-gray-800 dark:text-gray-100 border-b border-black/10 dark:border-gray-900/50 ${
+        !props.isBot ? "dark:bg-black" : "bg-gray-50  dark:bg-[#0a0a0a]"
+      }`}>
+      <div className="text-base gap-4 md:gap-6 md:max-w-2xl lg:max-w-xl xl:max-w-3xl flex lg:px-0 m-auto w-full">
+        <div className="flex flex-row gap-4 md:gap-6 md:max-w-2xl lg:max-w-xl xl:max-w-3xl p-4 md:py-6 lg:px-0 m-auto w-full">
+          <div className="w-8 flex flex-col relative items-end">
+            <div className="relative h-7 w-7 p-1 rounded-sm text-white flex items-center justify-center  text-opacity-100r">
+              {props.isBot ? (
+                !props.botAvatar ? (
+                  <div className="absolute h-8 w-8 rounded-full bg-gradient-to-r from-green-300 to-purple-400"></div>
+                ) : (
+                  props.botAvatar
+                )
+              ) : !props.userAvatar ? (
+                <div className="absolute h-8 w-8 rounded-full from-blue-400 to-blue-600 bg-gradient-to-r"></div>
+              ) : (
+                props.userAvatar
+              )}
+            </div>
+          </div>
+          <div className="relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]">
+            <div className="flex flex-grow flex-col gap-3">
+              <Markdown message={props.message} />
+            </div>
+            {/* source if aviable */}
+          </div>
+
+          {props.isBot && (
+            <div className="flex space-x-2">
+              {!props.hideCopy && (
+                <button
+                  onClick={() => {
+                    navigator.clipboard.writeText(props.message)
+                    setIsBtnPressed(true)
+                  }}
+                  className="flex items-center justify-center w-8 h-8 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
+                  {!isBtnPressed ? (
+                    <ClipboardIcon className="w-4 h-4 text-gray-400 group-hover:text-gray-500" />
+                  ) : (
+                    <CheckIcon className="w-4 h-4 text-green-400 group-hover:text-green-500" />
+                  )}
+                </button>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}