feat: resizable chat widget

README.md

@@ -111,7 +111,12 @@ Use the widget API to customize your widget:
 | height                | number    | No       |
 | input_container_style | json      | No       |
 | input_style           | json      | No       |
+| max_height            | number    | No       |
+| max_width             | number    | No       |
+| min_height            | number    | No       |
+| min_width             | number    | No       |
 | online                | boolean   | No       |
+| resizable             | boolean   | No       |
 | start_open            | boolean   | No       |
 | online_message        | string    | No       |
 | placeholder           | string    | No       |
@@ -263,6 +268,41 @@ Use the widget API to customize your widget:
 - Description: Styling options for formatting user messages in the chat window.
 - Example: `{ "color": "#222", "backgroundColor": "#e0ffe0" }`
 
+**resizable:**
+- Type: Boolean
+- Required: No
+- Default: false
+- Description: Enables or disables the ability to resize the chat window.
+- Example: true
+
+**min_width:**
+- Type: Number
+- Required: No
+- Default: 300
+- Description: Specifies the minimum width in pixels when resizing the chat window.
+- Example: 300
+
+**min_height:**
+- Type: Number
+- Required: No
+- Default: 400
+- Description: Specifies the minimum height in pixels when resizing the chat window.
+- Example: 400
+
+**max_width:**
+- Type: Number
+- Required: No
+- Default: 2000
+- Description: Specifies the maximum width in pixels when resizing the chat window.
+- Example: 800
+
+**max_height:**
+- Type: Number
+- Required: No
+- Default: 2000
+- Description: Specifies the maximum height in pixels when resizing the chat window.
+- Example: 1000
+
 **width:**
 - Type: Number
 - Required: No
@@ -287,14 +327,40 @@ Use the widget API to customize your widget:
 - Description: Additional headers to be sent to Langflow server
 - Example: `{ "X-Custom-Header": "value" }`
 
-
-## Live example:
+## Contributing
+Contributions are welcome! Please follow the details below on how to get started.
+1. Fork the repository and clone it to your local machine.
+2. Install the dependencies:
+   ```bash
+   npm install
+   (or)
+   npm install --legacy-peer-deps
+   ```
+3. Make your changes and ensure everything is working as expected:
+   ```bash
+   npm run build
+   npm start
+   ```
+4. Run the tests to ensure nothing is broken:
+   ```bash
+   npm test
+   ```
+5. Commit your changes and push them to your forked repository.
+6. Open a pull request to the main repository.
+
+## Live example
 Try out or [live example](https://codesandbox.io/s/langflow-embedded-chat-example-dv9zpx) to see how the Langflow Embedded Chat ⛓️ works. 
 
-1. first create a Flow and save it using [Langflow ⛓️](https://github.com/logspace-ai/langflow).
+1. First create a Flow and save it using [Langflow ⛓️](https://github.com/logspace-ai/langflow).
 2. Get the hosted URL to use in the live example.
 3. If you are using a public host (like [Hugging Face Spaces](https://huggingface.co/spaces/Logspace/Langflow)) use tweaks to keep your API keys safe.
 
 ## License
 
 This project is licensed under the [MIT License](https://opensource.org/licenses/MIT) - see the [LICENSE](https://github.com/logspace-ai/langflow-embedded-chat/tree/main/LICENSE) file for details.
+
+## ❤️ Contributors
+
+[![langflow contributors](https://contrib.rocks/image?repo=langflow-ai/langflow-embedded-chat)](https://github.com/langflow-ai/langflow-embedded-chat/graphs/contributors)
+
+---

docs/RESIZABLE_WIDGET.md

@@ -0,0 +1,110 @@
+# Resizable Chat Widget Feature
+
+This document provides information on how to use the resizable chat widget feature in the Langflow Embedded Chat component.
+
+## Overview
+
+The resizable chat widget allows users to dynamically adjust the dimensions of the chat window according to their preferences. This feature enhances user experience by providing flexibility in sizing the chat interface.
+
+## Usage
+
+To enable the resizable chat widget, use the following attributes when embedding the chat widget:
+
+```html
+<langflow-chat 
+  window_title="Resizable Chat" 
+  flow_id="your-flow-id"
+  host_url="your-host-url"
+  width="500"
+  height="600"
+  resizable="true"
+  min_width="300"
+  min_height="400"
+  max_width="800"
+  max_height="900"
+></langflow-chat>
+```
+
+## Configuration Options
+
+### Required Properties
+
+- `resizable` (boolean): Set to "true" to enable the resize functionality. Default is "false".
+
+### Optional Properties
+
+- `min_width` (number): Minimum width in pixels the chat window can be resized to. Default is 300.
+- `min_height` (number): Minimum height in pixels the chat window can be resized to. Default is 400.
+- `max_width` (number): Maximum width in pixels the chat window can be resized to. Default is 2000.
+- `max_height` (number): Maximum height in pixels the chat window can be resized to. Default is 2000.
+
+## How to Resize
+
+When the resizable feature is enabled, a resize handle appears in the bottom-right corner of the chat window. Users can:
+
+1. Click and hold the resize handle
+2. Drag the handle to adjust the size
+3. Release to set the new dimensions
+
+The chat window will respect the minimum and maximum size constraints specified in the configuration.
+
+## Example Implementation
+
+Here's a complete example implementation with the resizable feature:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Langflow Chat - Resizable Demo</title>
+</head>
+<body>
+    <h1>Resizable Chat Widget Demo</h1>
+
+    <langflow-chat 
+        window_title="Resizable Chat Widget" 
+        flow_id="your-flow-id"
+        host_url="your-host-url"
+        width="500"
+        height="600"
+        resizable="true"
+        min_width="300"
+        min_height="400"
+        max_width="800"
+        max_height="900"
+    ></langflow-chat>
+
+    <script src="path/to/langflow-chat.js"></script>
+</body>
+</html>
+```
+
+## Browser Compatibility
+
+The resizable feature is supported in all modern browsers:
+
+- Chrome 60+
+- Firefox 55+
+- Safari 11+
+- Edge 79+
+
+## Troubleshooting
+
+If the resize functionality is not working as expected:
+
+1. Ensure the `resizable` attribute is set to "true"
+2. Check that the min/max values are reasonable (min < max)
+3. Verify that there are no CSS conflicts affecting the chat window
+
+## Technical Implementation
+
+The resize functionality is implemented using JavaScript event listeners for mouse events. When a resize operation starts:
+
+1. The initial mouse position and chat dimensions are recorded
+2. Mouse movement is tracked to calculate new dimensions
+3. Size constraints are applied to ensure the window stays within min/max boundaries
+4. The window dimensions are updated in real-time
+
+This approach provides a smooth and responsive resize experience.

public/index.html

@@ -3,13 +3,70 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <title>Langflow Chat Demo</title>
+    <style>
+        body {
+            width: 100%;
+            height: 100vh;
+            margin: 0;
+            padding: 20px;
+            font-family: Arial, sans-serif;
+            display: flex;
+            flex-direction: column;
+        }
+        .demo-section {
+            margin-bottom: 30px;
+            padding: 20px;
+            border: 1px solid #eaeaea;
+            border-radius: 8px;
+        }
+        h1 {
+            margin-top: 0;
+            color: #333;
+        }
+        h2 {
+            color: #555;
+        }
+        .demo-description {
+            margin-bottom: 20px;
+            color: #666;
+        }
+    </style>
 </head>
-<body style="width: 100vh; height: 100vh; ">
-        <langflow-chat window_title="Langflow Chat" 
-        flow_id="4317421c-d4b5-4a22-bc7b-05e8af053b0e"
-        host_url="http://localhost:7860"
-        width="700"
+<body>
+    <h1>Langflow Chat Widget Demo</h1>
+
+    <div class="demo-section">
+        <h2>Standard Chat Widget</h2>
+        <div class="demo-description">
+            Default chat widget with fixed dimensions.
+        </div>
+        <langflow-chat 
+            window_title="Standard Chat" 
+            flow_id="4317421c-d4b5-4a22-bc7b-05e8af053b0e"
+            host_url="http://localhost:7860"
+            width="450"
+            height="650"
         ></langflow-chat>
+    </div>
+
+    <div class="demo-section">
+        <h2>Resizable Chat Widget</h2>
+        <div class="demo-description">
+            Resizable chat widget - users can drag the bottom-right corner to resize.
+        </div>
+        <langflow-chat 
+            window_title="Resizable Chat" 
+            flow_id="4317421c-d4b5-4a22-bc7b-05e8af053b0e"
+            host_url="http://localhost:7860"
+            width="500"
+            height="600"
+            resizable="true"
+            min_width="300"
+            min_height="400"
+            max_width="800"
+            max_height="900"
+        ></langflow-chat>
+    </div>
 </body>
 </html>