docs: add chat simulator

docs/docusaurus.config.js

@@ -9,6 +9,7 @@ import {themes as prismThemes} from 'prism-react-renderer';
 /** @type {import('@docusaurus/types').Config} */
 const config = {
   title: 'pyromod',
+  tagline: 'A monkeypatcher add-on for Pyrogram',
   favicon: 'img/favicon.ico',
 
   trailingSlash: false,
@@ -59,6 +60,9 @@ const config = {
   themeConfig:
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     ({
+      colorMode: {
+        defaultMode: 'dark',
+      },
       // Replace with your project's social card
       image: 'img/docusaurus-social-card.jpg',
       navbar: {
@@ -122,6 +126,19 @@ const config = {
         darkTheme: prismThemes.dracula,
       },
     }),
+   plugins: [
+    async function myPlugin(context, options) {
+      return {
+        name: "docusaurus-tailwindcss",
+        configurePostCss(postcssOptions) {
+          // Appends TailwindCSS and AutoPrefixer.
+          postcssOptions.plugins.push(require("tailwindcss"));
+          postcssOptions.plugins.push(require("autoprefixer"));
+          return postcssOptions;
+        },
+      };
+    },
+  ],
 };
 
 export default config;

docs/package.json

@@ -17,10 +17,15 @@
     "@docusaurus/core": "3.1.0",
     "@docusaurus/preset-classic": "3.1.0",
     "@mdx-js/react": "^3.0.0",
-    "clsx": "^2.0.0",
-    "prism-react-renderer": "^2.3.0",
+    "autoprefixer": "^10.4.17",
+    "clsx": "^2.1.0",
+    "daisyui": "^4.6.0",
+    "postcss": "^8.4.33",
     "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react-code-blocks": "^0.1.6",
+    "react-dom": "^18.0.0",
+    "tailwind-scrollbar": "^3.0.5",
+    "tailwindcss": "^3.4.1"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "3.1.0",

docs/src/components/ChatSimulator/index.jsx

@@ -0,0 +1,123 @@
+import styles from './styles.module.css';
+import {useEffect, useRef, useState} from "react";
+
+const controller = {
+    setMessages: () => {
+    },
+    updateCallback: () => {
+    }
+}
+
+const sendMessage = (message) => {
+    if (message) {
+        const msgObj = {
+            "type": "text",
+            "value": message,
+            "outgoing": true
+        }
+        controller.setMessages((messages) => [msgObj, ...messages]);
+
+        const response = controller.updateCallback(msgObj);
+        if (response) {
+            const responseObj = {
+                "type": "text",
+                "value": response,
+                "outgoing": false
+            }
+            setTimeout(() => {
+                controller.setMessages((messages) => [responseObj, ...messages]);
+            }, 300);
+        }
+    }
+}
+
+const Command = ({command}) => {
+    return (
+        <div className={"text-blue-700 inline cursor-pointer"} onClick={() => sendMessage(command)}>
+            {command}
+        </div>
+    )
+}
+
+
+const ChatMessage = ({message, outgoing}) => {
+    let innerBubble = [message];
+
+    // replace all texts that start with slash for Command instance instead
+    const commandRegex = /\/[a-zA-Z0-9]+/g;
+    const commands = message.match(commandRegex);
+
+    if (commands) {
+        const split = message.split(commandRegex);
+        innerBubble = [];
+        for (let i = 0; i < split.length; i++) {
+            innerBubble.push(split[i]);
+            if (i < commands.length) {
+                innerBubble.push(<Command key={i} command={commands[i]}/>);
+            }
+        }
+
+
+    }
+    if (!outgoing) {
+        return (
+            <div className="chat chat-start">
+                <div className="chat-image avatar">
+                    <div className="w-10 rounded-full">
+                        <div className={"bg-primary h-full w-full font-bold text-primary-content justify-center flex items-center"}>BOT</div>
+                    </div>
+                </div>
+                <div className="chat-bubble chat-bubble-primary text-primary-content">{innerBubble}</div>
+            </div>
+        )
+    }
+
+    return (
+        <div className="chat chat-end">
+            <div className="chat-bubble bg-base-300/70 text-base-content">{innerBubble}</div>
+        </div>
+    )
+}
+
+
+export const ChatSimulator = ({updateCallback}) => {
+    const inputRef = useRef(null);
+    const [messages, setMessages] = useState([]);
+    controller.setMessages = setMessages;
+    controller.updateCallback = updateCallback;
+
+    const onSubmit = (e) => {
+        e.preventDefault();
+        sendMessage(inputRef.current.value);
+        inputRef.current.value = "";
+        inputRef.current.focus();
+    }
+
+    useEffect(() => {
+        inputRef.current.focus();
+        sendMessage("/start")
+    }, []);
+
+    return (
+        <div className={styles.chatContainer}>
+            <div className={styles.chatHeader}>
+                <div className={styles.chatHeaderTitle}>Chat Simulator</div>
+            </div>
+            <div className={styles.chatBody}>
+                <div className={styles.chatMessagesContainer}>
+                    {messages.map((message, index) => {
+                        console.log(message)
+                        return (
+                            <ChatMessage key={index} message={message.value} outgoing={message.outgoing}/>
+                        )
+                    })}
+                </div>
+            </div>
+            <form onSubmit={onSubmit} className={styles.chatFooter}>
+                <input className={styles.chatInput} ref={inputRef} type="text" placeholder="Type a message"/>
+                <button type="submit" className={styles.chatButton}>Send</button>
+            </form>
+        </div>
+
+    )
+}

docs/src/components/ChatSimulator/styles.module.css

@@ -0,0 +1,50 @@
+
+        /*<div className={styles.chatContainer}>*/
+        /*    <div className={styles.chatHeader}>*/
+        /*        <div className={styles.chatHeaderTitle}>Chat Simulator</div>*/
+        /*    </div>*/
+        /*    <div className={styles.chatBody}>*/
+        /*        {messages.map((message, index) => {*/
+        /*            console.log(message)*/
+        /*            return (*/
+        /*                <ChatMessage key={index} message={message.value} outgoing={message.outgoing}/>*/
+        /*            )*/
+        /*        })}*/
+        /*    </div>*/
+        /*    <div className={styles.chatFooter}>*/
+        /*        <input className={styles.chatInput} ref={inputRef} type="text" placeholder="Type a message"/>*/
+        /*        <button className={styles.chatButton} onClick={sendMessage}>Send</button>*/
+        /*    </div>*/
+        /*</div>*/
+        /*                                                                                                                                                                                                                                                                          */
+.chatContainer {
+    @apply flex flex-col h-96 w-[80vw] md:w-96 bg-base-100 border-2 dark:border-base-300 rounded-box shadow-xl overflow-hidden m-2 text-base;
+}
+
+.chatHeader {
+    @apply flex flex-row justify-center items-center h-12 w-full bg-base-200 select-none;
+}
+
+.chatHeaderTitle {
+    @apply text-lg font-medium text-base-content;
+}
+
+.chatBody {
+    @apply flex flex-grow h-full max-h-full w-full bg-base-100 overflow-auto scrollbar-thin scrollbar-thumb-neutral;
+}
+
+.chatMessagesContainer {
+    @apply flex flex-col-reverse flex-grow h-full max-h-full w-full bg-base-100 px-2 overflow-auto scrollbar-thin;
+}
+
+.chatFooter {
+    @apply flex flex-row justify-center items-center h-12 w-full bg-base-200 gap-2 p-2;
+}
+
+.chatInput {
+    @apply input input-sm input-bordered w-full max-w-xs flex-grow;
+}
+
+.chatButton {
+    @apply btn btn-sm btn-primary;
+}

docs/src/components/PyromodChatSimulator/index.jsx

@@ -0,0 +1,46 @@
+import {ChatSimulator} from "../ChatSimulator";
+import {emit} from "../../utils/event";
+
+const state = {
+    "waiting_for": "",
+    "name": "",
+    "age": "",
+    "hobby": "",
+}
+
+const updateProcessor = (update) => {
+    const text = update.value
+
+    if (state.waiting_for === "name") {
+        state.name = text;
+        state.waiting_for = "age";
+        emit("pyromodCodeStep", 2)
+
+        return `Hello ${state.name}! Please tell me your age.`;
+    } else if (state.waiting_for === "age") {
+        state.age = text;
+        state.waiting_for = "hobby";
+        emit("pyromodCodeStep", 3)
+
+        return `So you are ${state.age} years old. Now i wanna know your hobby. What do you like to do?`;
+    } else if (state.waiting_for === "hobby") {
+        state.hobby = text;
+        state.waiting_for = "";
+        emit("pyromodCodeStep", 4)
+        return `Oh, i see. Okay, so your name is ${state.name}, you are ${state.age} years old and you like to ${state.hobby}. Nice to meet you!`;
+    }
+
+    switch (text) {
+        case "/start":
+            state.waiting_for = "name";
+            emit("pyromodCodeStep", 1)
+            return "Oh hey! What is your name?"
+        default:
+            return "Sorry, i don't understand that command. Try the command /start to start the conversation."
+
+    }
+}
+
+export const PyromodChatSimulator = ({}) => {
+    return <ChatSimulator updateCallback={updateProcessor} />
+}

docs/src/components/PyromodCodeBox/index.jsx

@@ -0,0 +1,62 @@
+import {on} from "../../utils/event";
+import {useState} from "react";
+import clsx from "clsx";
+import { CopyBlock, dracula } from 'react-code-blocks';
+
+export const PyromodCodeBox = () => {
+    const [step, setStep] = useState(0);
+
+    on("pyromodCodeStep", (step) => {
+        setStep(step);
+    });
+
+    const codeText = `
+@Client.on_message(filters.command("start"))
+    def start(client, message):
+        chat = message.chat
+        response = await chat.ask("Oh hey! What is your name?")
+        name = response.text
+        response = await chat.ask(f"Hello {name}! Please tell me your age.")
+        age = response.text
+        response = await chat.ask(f"So you are {age} years old. Now i wanna know your hobby. What do you like to do?")
+        hobby = response.text
+        await message.reply(f"Oh, i see. Okay, so your name is {name}, you are {age} years old and you like to {hobby}. Nice to meet you!")
+    `.trim()
+
+    const codeLines = codeText.split("\n");
+
+    const translateStepToLine = (step) => {
+        switch (step) {
+            case 1:
+                return "4"
+            case 2:
+                return "6"
+            case 3:
+                return "8"
+            default:
+                return ""
+        }
+    }
+
+    return (
+       <div className="mockup-code bg-base-200 h-96 w-[80vw] md:w-[800px] overflow-auto flex flex-col items-start scrollbar-thin scrollbar-thumb-neutral scrollbar-rounded-lg text-base">
+           {codeLines.map((line, index) => {
+                const lineNumber = index + 1;
+                const stepLine = translateStepToLine(step);
+                const highlightLine = stepLine === lineNumber.toString();
+
+                const highlight = "bg-primary text-primary-content";
+                const fade = "bg-transparent text-base-content opacity-40";
+                const normal = "bg-transparent text-base-content";
+
+                const className = "flex gap-2 rounded-none p-0 overflow-visible";
+                const extraClassName = stepLine? (highlightLine? highlight: fade): normal;
+                return (
+                    <pre data-prefix={lineNumber} className={clsx(className, extraClassName)} key={index}><code>{line}</code></pre>
+                )
+           })}
+       </div>
+    )
+
+
+}

docs/src/components/SelectVersionTabs/index.jsx

@@ -0,0 +1,25 @@
+import {useState} from "react";
+import clsx from "clsx";
+
+export const SelectVersionTabs = () => {
+    const [activeTab, setActiveTab] = useState(0);
+
+    const genOnClick = (index) => {
+        return () => {
+            setActiveTab(index);
+        }
+    }
+
+    const genClassName = (index) => {
+        return clsx("tab", {
+            "tab-active": activeTab === index
+        })
+    }
+
+    return (
+        <div role="tablist" className="tabs tabs-boxed">
+            <a role="tab" className={genClassName(0)} onClick={genOnClick(0)}>Without pyromod</a>
+            <a role="tab" className={genClassName(1)} onClick={genOnClick(1)}>With pyromod</a>
+        </div>
+    );
+}

docs/src/css/custom.css

@@ -28,3 +28,8 @@
   --ifm-color-primary-lightest: #4fddbf;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
+
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;