Improved message box

package-lock.json

@@ -8,6 +8,8 @@
       "name": "voxa",
       "version": "0.1.0",
       "dependencies": {
+        "@lexical/react": "^0.34.0",
+        "@lexical/rich-text": "^0.34.0",
         "@radix-ui/react-dialog": "^1.1.15",
         "@radix-ui/react-dropdown-menu": "^2.1.16",
         "@radix-ui/react-separator": "^1.1.7",
@@ -15,6 +17,9 @@
         "@radix-ui/react-tooltip": "^1.2.8",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
+        "cmdk": "^1.1.1",
+        "emoji-picker-react": "^4.13.2",
+        "lexical": "^0.34.0",
         "lucide-react": "^0.541.0",
         "next": "15.5.0",
         "react": "19.1.0",
@@ -44,6 +49,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.28.3",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.3.tgz",
+      "integrity": "sha512-9uIQ10o0WGdpP6GDhXcdOJPJuDgFtIDtN/9+ArJQ2NAfAmiuhTQdzkaTGR33v43GYS2UrSA0eX2pPPHoFVvpxA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@emnapi/runtime": {
       "version": "1.4.5",
       "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.4.5.tgz",
@@ -73,6 +87,21 @@
         "@floating-ui/utils": "^0.2.10"
       }
     },
+    "node_modules/@floating-ui/react": {
+      "version": "0.27.16",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.27.16.tgz",
+      "integrity": "sha512-9O8N4SeG2z++TSM8QA/KTeKFBVCNEz/AGS7gWPJf6KFRzmRWixFRnCnkPHRDwSVZW6QPDO6uT0P2SpWNKCc9/g==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.1.6",
+        "@floating-ui/utils": "^0.2.10",
+        "tabbable": "^6.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=17.0.0",
+        "react-dom": ">=17.0.0"
+      }
+    },
     "node_modules/@floating-ui/react-dom": {
       "version": "2.1.6",
       "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.6.tgz",
@@ -573,6 +602,261 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@lexical/clipboard": {
+      "version": "0.34.0",
+      "resolved": "https://registry.npmjs.org/@lexical/clipboard/-/clipboard-0.34.0.tgz",
+      "integrity": "sha512-u0Jx6Lncb3AKW/BrCfI7E2mhlTT0eCp2bR1hefHnKHo2LIxil4QHg4gtj+DWTxG2vkZVQvvsrGgiC+SX8Va81A==",
+      "license": "MIT",
+      "dependencies": {
+        "@lexical/html": "0.34.0",
+        "@lexical/list": "0.34.0",
+        "@lexical/selection": "0.34.0",
+        "@lexical/utils": "0.34.0",
+        "lexical": "0.34.0"
+      }
+    },
+    "node_modules/@lexical/code": {
+      "version": "0.34.0",
+      "resolved": "https://registry.npmjs.org/@lexical/code/-/code-0.34.0.tgz",
+      "integrity": "sha512-jsr8I+DEan0FuZnjQzQmuyebH0TpSV/6ESnjpe1x4egNvaedelDAJV3/v4AZcfJuB4yM2YHFbMgb7GbUmj7usw==",
+      "license": "MIT",
+      "dependencies": {
+        "@lexical/utils": "0.34.0",
+        "lexical": "0.34.0",
+        "prismjs": "^1.30.0"
+      }
+    },
+    "node_modules/@lexical/devtools-core": {
+      "version": "0.34.0",
+      "resolved": "https://registry.npmjs.org/@lexical/devtools-core/-/devtools-core-0.34.0.tgz",
+      "integrity": "sha512-m+QOdJOwK/UolrwpSDOId4665XsfMG1+MrYGm/ZGx+J7kai/j50CTTBaZ8vdslL3oPiJxGzsqm/UDubpDS6wwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@lexical/html": "0.34.0",
+        "@lexical/link": "0.34.0",
+        "@lexical/mark": "0.34.0",
+        "@lexical/table": "0.34.0",
+        "@lexical/utils": "0.34.0",
+        "lexical": "0.34.0"
+      },
+      "peerDependencies": {
+        "react": ">=17.x",
+        "react-dom": ">=17.x"
+      }
+    },
+    "node_modules/@lexical/dragon": {
+      "version": "0.34.0",
+      "resolved": "https://registry.npmjs.org/@lexical/dragon/-/dragon-0.34.0.tgz",
+      "integrity": "sha512-peKKMuI9/3GQMVZ2W5aZ8vn0YErBPbfyk6F9zV2koY6frIiCzL5pBJiPpXEvmweDxnxay2TYcFTOWYNGiUWuxw==",
+      "license": "MIT",
+      "dependencies": {
+        "lexical": "0.34.0"
+      }
+    },
+    "node_modules/@lexical/hashtag": {
+      "version": "0.34.0",
+      "resolved": "https://registry.npmjs.org/@lexical/hashtag/-/hashtag-0.34.0.tgz",
+      "integrity": "sha512-/dRzbQt+Wdt7aMAzLbnNU/M2XDhlzNGI5XpMItfiWRTYA2LT1D9hupcTHPsRRMTpidy1+JPqxPTeqGyoqHKcZQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@lexical/utils": "0.34.0",
+        "lexical": "0.34.0"
+      }
+    },
+    "node_modules/@lexical/history": {
+      "version": "0.34.0",
+      "resolved": "https://registry.npmjs.org/@lexical/history/-/history-0.34.0.tgz",
+      "integrity": "sha512-EVLMOWTmKTyt1LOxYP0lOYNWl9lNiVZkaUgZtvncQbQaZJGgEJqc0FrZvl5K+SrRIqXiSdQi7EEfgvGwgfRqCA==",
+      "license": "MIT",
+      "dependencies": {
+        "@lexical/utils": "0.34.0",
+        "lexical": "0.34.0"
+      }
+    },
+    "node_modules/@lexical/html": {
+      "version": "0.34.0",
+      "resolved": "https://registry.npmjs.org/@lexical/html/-/html-0.34.0.tgz",
+      "integrity": "sha512-QoFm2P9PSFadInMCFGKJBQI8M2EPUjG6fGf+mUQG9WgX7gIAvTDr21lzUM+dNGtrBwtYxUSQizmUx1NeP6ShyQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@lexical/selection": "0.34.0",
+        "@lexical/utils": "0.34.0",
+        "lexical": "0.34.0"
+      }
+    },
+    "node_modules/@lexical/link": {
+      "version": "0.34.0",
+      "resolved": "https://registry.npmjs.org/@lexical/link/-/link-0.34.0.tgz",
+      "integrity": "sha512-4C8BtyqqFHZR1TA5osx/W6TrgPurxwwHsJhEflkZSRkcsyzwvtgWnfkp8vD3VGRsAUApYXmbl9InbJYzrs7k9Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@lexical/utils": "0.34.0",
+        "lexical": "0.34.0"
+      }
+    },
+    "node_modules/@lexical/list": {
+      "version": "0.34.0",
+      "resolved": "https://registry.npmjs.org/@lexical/list/-/list-0.34.0.tgz",
+      "integrity": "sha512-AVhkts0WMqfUZJsJIvw7wJXKtMF0AiUT8TdEeGS6G57AvcZgH+NXiHuTiqfLLYrezZ4NWDTu70M6WJkNd7LEng==",
+      "license": "MIT",
+      "dependencies": {
+        "@lexical/selection": "0.34.0",
+        "@lexical/utils": "0.34.0",
+        "lexical": "0.34.0"
+      }
+    },
+    "node_modules/@lexical/mark": {
+      "version": "0.34.0",
+      "resolved": "https://registry.npmjs.org/@lexical/mark/-/mark-0.34.0.tgz",
+      "integrity": "sha512-doQ/qRllCV/jgdOT46jJtEeGgIc7QV/7E2HS/4ayjHtVwQZOE8Dio7zEXqweIO83fYyt8DTb9hmWP/khrmNM1g==",
+      "license": "MIT",
+      "dependencies": {
+        "@lexical/utils": "0.34.0",
+        "lexical": "0.34.0"
+      }
+    },
+    "node_modules/@lexical/markdown": {
+      "version": "0.34.0",
+      "resolved": "https://registry.npmjs.org/@lexical/markdown/-/markdown-0.34.0.tgz",
+      "integrity": "sha512-v3vp26LslpQ3CTTIci7jC9sUryL+OYG4gu21TOxO931yOF45j/RDgDKmEuySyaq5hcB6Q+kytALKUPfZtvIP1Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@lexical/code": "0.34.0",
+        "@lexical/link": "0.34.0",
+        "@lexical/list": "0.34.0",
+        "@lexical/rich-text": "0.34.0",
+        "@lexical/text": "0.34.0",
+        "@lexical/utils": "0.34.0",
+        "lexical": "0.34.0"
+      }
+    },
+    "node_modules/@lexical/offset": {
+      "version": "0.34.0",
+      "resolved": "https://registry.npmjs.org/@lexical/offset/-/offset-0.34.0.tgz",
+      "integrity": "sha512-j3tdGuQuiKPdOEsIBMd8ZU4Ka22v8LFCWWOlHyU7lT4xVoC6+921QKbdI7NY9w5lX8Yd28u5HFgHE2TaTsX4AA==",
+      "license": "MIT",
+      "dependencies": {
+        "lexical": "0.34.0"
+      }
+    },
+    "node_modules/@lexical/overflow": {
+      "version": "0.34.0",
+      "resolved": "https://registry.npmjs.org/@lexical/overflow/-/overflow-0.34.0.tgz",
+      "integrity": "sha512-9f+9E++BxR4jtmcJg4VLnAmjT19IuOS5yyqaMvwEl7612DP5ch9sYG43HusL0w5cjUFbxX6Urkqp8bMPpo0BWA==",
+      "license": "MIT",
+      "dependencies": {
+        "lexical": "0.34.0"
+      }
+    },
+    "node_modules/@lexical/plain-text": {
+      "version": "0.34.0",
+      "resolved": "https://registry.npmjs.org/@lexical/plain-text/-/plain-text-0.34.0.tgz",
+      "integrity": "sha512-OmbET24smoKR1v7FKqG8ZvOns01Eaadkdg1FzcrgwnoT7lHXI3W2tO0XJ0yAQ4Z9pGX6lTNVZPf0T4ywknKYYg==",
+      "license": "MIT",
+      "dependencies": {
+        "@lexical/clipboard": "0.34.0",
+        "@lexical/selection": "0.34.0",
+        "@lexical/utils": "0.34.0",
+        "lexical": "0.34.0"
+      }
+    },
+    "node_modules/@lexical/react": {
+      "version": "0.34.0",
+      "resolved": "https://registry.npmjs.org/@lexical/react/-/react-0.34.0.tgz",
+      "integrity": "sha512-i1GyYyJUeFXe/wwk7WI+zqnx+gB8HsSfXp5vMA7prUbpAc6RooRL6XHlY2Fc2suCAmcZmrucLZt3UFKsb+F6KQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react": "^0.27.8",
+        "@lexical/devtools-core": "0.34.0",
+        "@lexical/dragon": "0.34.0",
+        "@lexical/hashtag": "0.34.0",
+        "@lexical/history": "0.34.0",
+        "@lexical/link": "0.34.0",
+        "@lexical/list": "0.34.0",
+        "@lexical/mark": "0.34.0",
+        "@lexical/markdown": "0.34.0",
+        "@lexical/overflow": "0.34.0",
+        "@lexical/plain-text": "0.34.0",
+        "@lexical/rich-text": "0.34.0",
+        "@lexical/table": "0.34.0",
+        "@lexical/text": "0.34.0",
+        "@lexical/utils": "0.34.0",
+        "@lexical/yjs": "0.34.0",
+        "lexical": "0.34.0",
+        "react-error-boundary": "^3.1.4"
+      },
+      "peerDependencies": {
+        "react": ">=17.x",
+        "react-dom": ">=17.x"
+      }
+    },
+    "node_modules/@lexical/rich-text": {
+      "version": "0.34.0",
+      "resolved": "https://registry.npmjs.org/@lexical/rich-text/-/rich-text-0.34.0.tgz",
+      "integrity": "sha512-fFokmx+XsnertQLlBNBLxVDqirtUztDth47/7KZRfX2M63T9nX/jx2YvuUEaHdgJMG5NhcvKuQ727fRAel6AUA==",
+      "license": "MIT",
+      "dependencies": {
+        "@lexical/clipboard": "0.34.0",
+        "@lexical/selection": "0.34.0",
+        "@lexical/utils": "0.34.0",
+        "lexical": "0.34.0"
+      }
+    },
+    "node_modules/@lexical/selection": {
+      "version": "0.34.0",
+      "resolved": "https://registry.npmjs.org/@lexical/selection/-/selection-0.34.0.tgz",
+      "integrity": "sha512-qnnNdAihfsKxPJNK6s3crsZumCyvIPclbdNzC9xMWXFjAKvt1EPMnptD7Dy//DvA5nK/e/9qKCZQ+2kgxwsZiw==",
+      "license": "MIT",
+      "dependencies": {
+        "lexical": "0.34.0"
+      }
+    },
+    "node_modules/@lexical/table": {
+      "version": "0.34.0",
+      "resolved": "https://registry.npmjs.org/@lexical/table/-/table-0.34.0.tgz",
+      "integrity": "sha512-MzH0OREk4zIzkDNuiSBZEDBzazEKOh9X9koQcgClySOEqL/86DEPwoDuB5h1P4oTMRlzPzyKeZhksKNoY4QoBQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@lexical/clipboard": "0.34.0",
+        "@lexical/utils": "0.34.0",
+        "lexical": "0.34.0"
+      }
+    },
+    "node_modules/@lexical/text": {
+      "version": "0.34.0",
+      "resolved": "https://registry.npmjs.org/@lexical/text/-/text-0.34.0.tgz",
+      "integrity": "sha512-8T4RwSNP/cVEzg+yf4lMlfzyelnyZjSIsUl2sTiwHHb4RD/r6Zm+VrinCUhtMNq6aasVknV7GEi8Isx60x9XSQ==",
+      "license": "MIT",
+      "dependencies": {
+        "lexical": "0.34.0"
+      }
+    },
+    "node_modules/@lexical/utils": {
+      "version": "0.34.0",
+      "resolved": "https://registry.npmjs.org/@lexical/utils/-/utils-0.34.0.tgz",
+      "integrity": "sha512-rLP1WTZFk+o3d4PiKkxs76ifj7q01PjqjbZjcvUyPxjL3ca5oL1iwPU3QqXXNSNrhnJ9oQoaI7fCeA7p+9/KSw==",
+      "license": "MIT",
+      "dependencies": {
+        "@lexical/list": "0.34.0",
+        "@lexical/selection": "0.34.0",
+        "@lexical/table": "0.34.0",
+        "lexical": "0.34.0"
+      }
+    },
+    "node_modules/@lexical/yjs": {
+      "version": "0.34.0",
+      "resolved": "https://registry.npmjs.org/@lexical/yjs/-/yjs-0.34.0.tgz",
+      "integrity": "sha512-nnymAhO16k82ssiP9F0ph6Yq2icDImRgWeyI76SyRsYn1HqeOwaWUZV/bx03rFgYC0DNNtBQ6TS8me4CBjcVhA==",
+      "license": "MIT",
+      "dependencies": {
+        "@lexical/offset": "0.34.0",
+        "@lexical/selection": "0.34.0",
+        "lexical": "0.34.0"
+      },
+      "peerDependencies": {
+        "yjs": ">=13.5.22"
+      }
+    },
     "node_modules/@next/env": {
       "version": "15.5.0",
       "resolved": "https://registry.npmjs.org/@next/env/-/env-15.5.0.tgz",
@@ -1740,6 +2024,22 @@
         "node": ">=6"
       }
     },
+    "node_modules/cmdk": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/cmdk/-/cmdk-1.1.1.tgz",
+      "integrity": "sha512-Vsv7kFaXm+ptHDMZ7izaRsP70GgrW9NBNGswt9OZaVBLlE0SNpDq8eu/VGXyF9r7M0azK3Wy7OlYXsuyYLFzHg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "^1.1.1",
+        "@radix-ui/react-dialog": "^1.1.6",
+        "@radix-ui/react-id": "^1.1.0",
+        "@radix-ui/react-primitive": "^2.0.2"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19 || ^19.0.0-rc",
+        "react-dom": "^18 || ^19 || ^19.0.0-rc"
+      }
+    },
     "node_modules/color": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
@@ -1808,6 +2108,21 @@
       "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==",
       "license": "MIT"
     },
+    "node_modules/emoji-picker-react": {
+      "version": "4.13.2",
+      "resolved": "https://registry.npmjs.org/emoji-picker-react/-/emoji-picker-react-4.13.2.tgz",
+      "integrity": "sha512-azaJQLTshEOZVhksgU136izJWJyZ4Clx6xQ6Vctzk1gOdPPAUbTa/JYDwZJ8rh97QxnjpyeftXl99eRlYr3vNA==",
+      "license": "MIT",
+      "dependencies": {
+        "flairup": "1.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">=16"
+      }
+    },
     "node_modules/enhanced-resolve": {
       "version": "5.18.3",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.3.tgz",
@@ -1822,6 +2137,12 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/flairup": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/flairup/-/flairup-1.0.0.tgz",
+      "integrity": "sha512-IKlE+pNvL2R+kVL1kEhUYqRxVqeFnjiIvHWDMLFXNaqyUdFXQM2wte44EfMYJNHkW16X991t2Zg8apKkhv7OBA==",
+      "license": "MIT"
+    },
     "node_modules/get-nonce": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
@@ -1845,6 +2166,17 @@
       "license": "MIT",
       "optional": true
     },
+    "node_modules/isomorphic.js": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/isomorphic.js/-/isomorphic.js-0.2.5.tgz",
+      "integrity": "sha512-PIeMbHqMt4DnUP3MA/Flc0HElYjMXArsw1qwJZcm9sqR8mq3l8NYizFMty0pWwE/tzIGH3EKK5+jes5mAr85yw==",
+      "license": "MIT",
+      "peer": true,
+      "funding": {
+        "type": "GitHub Sponsors ❤",
+        "url": "https://github.com/sponsors/dmonad"
+      }
+    },
     "node_modules/jiti": {
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.5.1.tgz",
@@ -1855,6 +2187,34 @@
         "jiti": "lib/jiti-cli.mjs"
       }
     },
+    "node_modules/lexical": {
+      "version": "0.34.0",
+      "resolved": "https://registry.npmjs.org/lexical/-/lexical-0.34.0.tgz",
+      "integrity": "sha512-oqQ87i49oGRt8u9qIXow+fWeqN6luRMtYAa1GAx1l9AaR3A8Tfrgnmj2+13ej6CMPK6JunKaUXbd+7FDy+s8XQ==",
+      "license": "MIT"
+    },
+    "node_modules/lib0": {
+      "version": "0.2.114",
+      "resolved": "https://registry.npmjs.org/lib0/-/lib0-0.2.114.tgz",
+      "integrity": "sha512-gcxmNFzA4hv8UYi8j43uPlQ7CGcyMJ2KQb5kZASw6SnAKAf10hK12i2fjrS3Cl/ugZa5Ui6WwIu1/6MIXiHttQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "isomorphic.js": "^0.2.4"
+      },
+      "bin": {
+        "0ecdsa-generate-keypair": "bin/0ecdsa-generate-keypair.js",
+        "0gentesthtml": "bin/gentesthtml.js",
+        "0serve": "bin/0serve.js"
+      },
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "type": "GitHub Sponsors ❤",
+        "url": "https://github.com/sponsors/dmonad"
+      }
+    },
     "node_modules/lightningcss": {
       "version": "1.30.1",
       "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.1.tgz",
@@ -2285,6 +2645,15 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/prismjs": {
+      "version": "1.30.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz",
+      "integrity": "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/react": {
       "version": "19.1.0",
       "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
@@ -2306,6 +2675,22 @@
         "react": "^19.1.0"
       }
     },
+    "node_modules/react-error-boundary": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-3.1.4.tgz",
+      "integrity": "sha512-uM9uPzZJTF6wRQORmSrvOIgt4lJ9MC1sNgEOj2XGsDTRE4kmpWxg7ENK9EWNKJRMAOY9z0MuF4yIfl6gp4sotA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5"
+      },
+      "engines": {
+        "node": ">=10",
+        "npm": ">=6"
+      },
+      "peerDependencies": {
+        "react": ">=16.13.1"
+      }
+    },
     "node_modules/react-remove-scroll": {
       "version": "2.7.1",
       "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.7.1.tgz",
@@ -2479,6 +2864,12 @@
         }
       }
     },
+    "node_modules/tabbable": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
+      "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==",
+      "license": "MIT"
+    },
     "node_modules/tailwind-merge": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.3.1.tgz",
@@ -2613,6 +3004,24 @@
       "engines": {
         "node": ">=18"
       }
+    },
+    "node_modules/yjs": {
+      "version": "13.6.27",
+      "resolved": "https://registry.npmjs.org/yjs/-/yjs-13.6.27.tgz",
+      "integrity": "sha512-OIDwaflOaq4wC6YlPBy2L6ceKeKuF7DeTxx+jPzv1FHn9tCZ0ZwSRnUBxD05E3yed46fv/FWJbvR+Ud7x0L7zw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "lib0": "^0.2.99"
+      },
+      "engines": {
+        "node": ">=16.0.0",
+        "npm": ">=8.0.0"
+      },
+      "funding": {
+        "type": "GitHub Sponsors ❤",
+        "url": "https://github.com/sponsors/dmonad"
+      }
     }
   }
 }

package.json

@@ -8,6 +8,8 @@
     "start": "next start"
   },
   "dependencies": {
+    "@lexical/react": "^0.34.0",
+    "@lexical/rich-text": "^0.34.0",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-separator": "^1.1.7",
@@ -15,6 +17,9 @@
     "@radix-ui/react-tooltip": "^1.2.8",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "emoji-picker-react": "^4.13.2",
+    "lexical": "^0.34.0",
     "lucide-react": "^0.541.0",
     "next": "15.5.0",
     "react": "19.1.0",

src/app/server/[id]/page.tsx

@@ -1,22 +1,35 @@
 import MessageBox from "@/components/MessageBox";
 import AppSidebar from "@/components/Sidebar";
 
-export default async function Server(params: {params: Promise<{ id: string }>}) {
+export default async function Server(params: {
+  params: Promise<{ id: string }>;
+}) {
   const { id } = await params.params;
 
   return (
-    <AppSidebar server={{
+    <AppSidebar
-      id: 'bro',
+      server={{
-      name: 'Bro',
+        id: "bro",
-      channels: [
+        name: "Bro",
-        { id: '1', name: 'general', kind: 'text' },
+        channels: [
-        { id: '2', name: 'random', kind: 'text' },
+          { id: "1", name: "general", kind: "text" },
-        { id: '3', name: 'help', kind: 'text' },
+          { id: "2", name: "random", kind: "text" },
-        { id: '4', name: 'voice-chat', kind: 'voice' },
+          { id: "3", name: "help", kind: "text" },
-      ]
+          { id: "4", name: "voice-chat", kind: "voice" },
-    }}>
+        ],
-      <MessageBox />
+      }}
-      <MessageBox />
+    >
+      <MessageBox
+        messages={[
+          {
+            id: "1",
+            authorId: "user1",
+            content: "Hello, this is a test message!",
+            channelId: "1",
+            timestamp: new Date(),
+          },
+        ]}
+      />
     </AppSidebar>
   );
 }

src/components/MessageBox.tsx

@@ -1,36 +1,67 @@
+"use client";
+
+import Message from "@/types/message";
 import { Button } from "./ui/button";
 import { Input } from "./ui/input";
+import * as emoji from "emoji-picker-react";
+import EmojiPicker from "emoji-picker-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "./ui/dropdown-menu";
+import { SmilePlusIcon } from "lucide-react";
+import { useState } from "react";
 
-function Message() {
+function MessageContainer({ message }: { message: Message }) {
   return (
     <div className="flex flex-col gap-3">
       <div className="flex gap-2">
         <div className="w-8 h-8 rounded-full bg-gray-400" />
         <div className="flex flex-col">
           <span className="font-bold flex gap-1 items-center">
-            User <p className="text-neutral-500 text-xs">26/8/25, 12:45 AM</p>
+            {message.authorId}
+            <p className="text-neutral-500 text-xs">26/8/25, 12:45 AM</p>
           </span>
 
-          <span className="text-sm text-muted-foreground">
+          <span className="text-sm text-foreground/85">{message.content}</span>
-            Hello, this is a message!
-          </span>
         </div>
       </div>
     </div>
   );
 }
 
-export default function MessageBox() {
+export default function MessageBox({ messages }: { messages: Message[] }) {
+  const [text, setText] = useState("");
+
   return (
     <div className="h-screen w-full flex flex-col p-5 gap-5">
       <div className="w-full flex-1 overflow-y-scroll flex gap-2 flex-col-reverse">
-        {Array.from({ length: 50 }).map((_, i) => (
+        {messages.map((msg) => (
-          <Message key={i} />
+          <MessageContainer key={msg.id} message={msg} />
         ))}
       </div>
       <div className="w-full flex gap-3">
-        <Input className="" placeholder="Type a message..." />
+        <Input
-        <Button>Send</Button>
+          className=""
+          placeholder="Type a message..."
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+        />
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="secondary">
+              <SmilePlusIcon />
+            </Button>
+          </DropdownMenuTrigger>
+
+          <DropdownMenuContent className="">
+            <EmojiPicker
+              onEmojiClick={(e) => setText(text + e.emoji)}
+              theme={emoji.Theme.DARK}
+            />
+          </DropdownMenuContent>
+        </DropdownMenu>
       </div>
     </div>
   );

src/components/Sidebar.tsx

@@ -15,7 +15,7 @@ import {
   DropdownMenuContent,
   DropdownMenuTrigger,
 } from "./ui/dropdown-menu";
-import Server from "@/types/Server";
+import Server from "@/types/server";
 
 export default function AppSidebar({
   server,
@@ -24,8 +24,8 @@ export default function AppSidebar({
   server?: Server;
   children: React.ReactNode;
 }>) {
-  return (
+  return server ? (
-    server ? <SidebarProvider defaultOpen>
+    <SidebarProvider defaultOpen>
       <Sidebar>
         <SidebarHeader>
           <SidebarMenu>
@@ -53,14 +53,15 @@ export default function AppSidebar({
         <SidebarContent className="px-2">
           {server.channels.map((channel) => (
             <SidebarMenuButton key={channel.id} className="gap-1.5">
-              {channel.kind === 'voice' ? <MicIcon /> : <HashIcon />}
+              {channel.kind === "voice" ? <MicIcon /> : <HashIcon />}
               {channel.name}
             </SidebarMenuButton>
           ))}
         </SidebarContent>
       </Sidebar>
       {children}
-    </SidebarProvider> :
+    </SidebarProvider>
+  ) : (
     children
   );
 }

src/types/Server.ts

@@ -1,11 +1,7 @@
-export interface Channel {
+import Channel from "./channel";
-  id: string;
-  name: string;
-  kind: "text" | "voice";
-}
 
 export default interface Server {
   id: string;
   name: string;
   channels: Channel[];
-}
+}

src/types/channel.ts

@@ -0,0 +1,5 @@
+export default interface Channel {
+  id: string;
+  name: string;
+  kind: "text" | "voice";
+}

src/types/message.ts

@@ -0,0 +1,7 @@
+export default interface Message {
+  id: string;
+  content: string;
+  authorId: string;
+  channelId: string;
+  timestamp: Date;
+}