Merge branch 'develop'

README.md

@@ -2,26 +2,19 @@
   <img src="https://github.com/molvqingtai/WebChat/blob/master/src/public/logo.png" width="200px"/>
 </p>
 
-
 # WebChat
 
 > Chat with anyone on any website
 
-
-
-
-
 This is an anonymous chat browser extension that is decentralized and serverless, utilizing WebRTC for end-to-end encrypted communication. It prioritizes privacy, with all data stored locally.
 
- The goal is to address the issue of delayed replies on websites by adding instant messaging capabilities to any site, allowing for chatting anytime, anywhere.
+The aim is to add chat room functionality to any website, enabling real-time messaging anytime, anywhere.
+
+### Video
 
 
 
-### Example
-
-![Example](https://github.com/molvqingtai/WebChat/blob/master/src/public/Example.png)
-
-
+https://github.com/user-attachments/assets/34890975-5926-4e38-9a5f-34a28e17ff36
 
 
 
@@ -29,15 +22,13 @@ This is an anonymous chat browser extension that is decentralized and serverless
 
 In addition to the great idea of decentralized chat, it also leverages some fantastic technologies.
 
-* **[remesh](https://github.com/remesh-js/remesh)**: A frontend framework that implements DDD principles in code, achieving true separation of UI and logic. This provides a robust structure that can be easily migrated to other frontend frameworks like Vue.
+- **[remesh](https://github.com/remesh-js/remesh)**: A framework in JavaScript that implements DDD principles, achieving true separation of UI and logic, allowing for easy reimplementation of the UI part, such as rewriting it in Vue, due to its independence from the UI.
 
-* **[shadcn/ui](https://ui.shadcn.com/)**: A beautiful UI library and a pioneer of no-install options, with unmatched ease of customizing styles.
-
-* **[wxt](https://wxt.dev/)**: This is the best framework I’ve used for building browser extensions, bar none.
-
-* **[trystero](https://github.com/dmotz/trystero)**: The core dependency for implementing decentralized communication, enabling connections to decentralized networks like IPFS, torrent, Nostr, etc.
+- **[shadcn/ui](https://ui.shadcn.com/)**: A beautiful UI library and a pioneer of the no-install concept, offering unmatched convenience in customizing styles.
 
+- **[wxt](https://wxt.dev/)**: This is the best framework I’ve used for building browser extensions, bar none.
 
+- **[trystero](https://github.com/dmotz/trystero)**: The core dependency for implementing decentralized communication, enabling connections to decentralized networks like IPFS, torrent, Nostr, etc.
 
 ### License
 

package.json

@@ -117,7 +117,6 @@
     "jiti": "^2.0.0",
     "lint-staged": "^15.2.10",
     "npm-run-all": "^4.1.5",
-    "package-up": "^5.0.0",
     "postcss": "^8.4.47",
     "postcss-rem-to-responsive-pixel": "^6.0.2",
     "prettier": "^3.3.3",

pnpm-lock.yaml

@@ -225,9 +225,6 @@ importers:
       npm-run-all:
         specifier: ^4.1.5
         version: 4.1.5
-      package-up:
-        specifier: ^5.0.0
-        version: 5.0.0
       postcss:
         specifier: ^8.4.47
         version: 8.4.47
@@ -5183,10 +5180,6 @@ packages:
     resolution: {integrity: sha512-cbH9IAIJHNj9uXi196JVsRlt7cHKak6u/e6AkL/bkRelZ7rlL3X1YKxsZwa36xipOEKAsdtmaG6aAJoM1fx2zA==}
     engines: {node: '>=14.16'}
 
-  package-up@5.0.0:
-    resolution: {integrity: sha512-MQEgDUvXCa3sGvqHg3pzHO8e9gqTCMPVrWUko3vPQGntwegmFo52mZb2abIVTjFnUcW0BcPz0D93jV5Cas1DWA==}
-    engines: {node: '>=18'}
-
   pako@1.0.11:
     resolution: {integrity: sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==}
 
@@ -12561,10 +12554,6 @@ snapshots:
       registry-url: 6.0.1
       semver: 7.6.3
 
-  package-up@5.0.0:
-    dependencies:
-      find-up-simple: 1.0.0
-
   pako@1.0.11: {}
 
   parent-module@1.0.1:

src/app/content/index.tsx

@@ -32,6 +32,7 @@ export default defineContentScript({
       anchor: 'body',
       append: 'last',
       mode: 'open',
+      isolateEvents: ['keyup', 'keydown', 'keypress'],
       onMount: (container) => {
         const app = createElement('<div id="app"></div>')
         container.append(app)

src/app/content/views/AppContainer/index.tsx

@@ -11,7 +11,7 @@ const AppContainer: FC<AppContainerProps> = ({ children, open }) => {
   const { size, ref } = useResizable({
     initSize: Math.max(375, window.innerWidth / 6),
     maxSize: Math.min(750, window.innerWidth / 3),
-    minSize: Math.max(375, window.innerWidth / 5),
+    minSize: Math.max(375, window.innerWidth / 6),
     direction: 'left'
   })
 

src/app/content/views/Setup/index.tsx

@@ -89,11 +89,12 @@ const Setup: FC = () => {
       },
       { delay: 2000, immediate: true, limit: printTextList.length }
     )
-
+    timer.on('stop', () => {
+      printTextList.length === 0 && send(messageListDomain.command.ClearListCommand())
+    })
     timer.start()
     return () => {
       timer.stop()
-      printTextList.length === 0 && send(messageListDomain.command.ClearListCommand())
     }
   }, [])