@yartsun/hypershadow-widget 0.1.0

package/README.md

@@ -0,0 +1,89 @@
+# Hypershadow Widget
+
+Chat widget for Hypershadow platform with WebSocket communication.
+
+## Requirements
+
+- Node.js 18 or higher
+
+## Building the project
+
+```bash
+# Install dependencies
+npm i
+
+# Build the project
+npm run build
+```
+
+Build output will be located in the `/dist` directory
+
+## Module Federation Usage
+
+### Using the chat component in another application
+
+1. **Import the federated component:**
+
+```javascript
+// In your host application
+const ChatWrapper = React.lazy(() => import('chat/chat'));
+
+// Or for Vue 3
+import { defineAsyncComponent } from 'vue';
+const ChatWrapper = defineAsyncComponent(() => import('chat/chat'));
+```
+
+2. **Pass WebSocket link via props (recommended for federation):**
+
+```vue
+<template>
+  <ChatWrapper 
+    :config="chatConfig" 
+    :link="websocketUrl"
+    :is-embedded="true"
+    :is-preview="false" 
+  />
+</template>
+
+<script setup>
+const websocketUrl = "wss://your-websocket-server.com/chat";
+const chatConfig = {
+  // ... your configuration
+};
+</script>
+```
+
+3. **Alternative: Pass link via URL parameters:**
+
+```
+http://your-app.com/chat?link=wss://your-websocket-server.com/chat
+```
+
+### Troubleshooting Federation Issues
+
+If you're experiencing WebSocket connection issues when using through federation:
+
+1. **Check WebSocket URL format:**
+   - Must start with `ws://` or `wss://`
+   - URL should be properly encoded if passed via query parameters
+
+2. **Use props instead of URL parameters:**
+   ```vue
+   <!-- Recommended approach -->
+   <ChatWrapper :link="websocketUrl" :config="config" />
+   ```
+
+3. **Enable debugging:**
+   - Open browser console to see detailed connection logs
+   - Component will show which link source is being used
+
+4. **CORS considerations:**
+   - Ensure your WebSocket server allows connections from the federation host domain
+   - Check browser network tab for any blocked requests
+
+### Props Reference
+
+- `link?: string` - WebSocket server URL (highest priority)
+- `config: WidgetConfig` - Widget configuration object (required)  
+- `isEmbedded?: boolean` - Whether widget is embedded in another app
+- `isPreview?: boolean` - Preview mode (shows placeholder content)