Skip to content

Commit 312c179

Browse files
chloebyun-wdchloebyun-wd
authored
enhancement: bubble/full chat css enhancements for width/height on chatWindow (#355)
* bubble/full css enhancements with width/height * keep index.css to give more granular control to theme config object * rm rouge file
1 parent 63af97c commit 312c179

File tree

14 files changed

+11338
-67
lines changed

14 files changed

+11338
-67
lines changed

‎README.md‎

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ yarn build
6464
<flowise-fullchatbot></flowise-fullchatbot>
6565
```
6666

67-
To enable full screen, add `margin: 0` to <code>body</code> style, and confirm you don't set height and width
67+
To enable full screen, add `margin: 0` to <code>body</code> style. The default height is `100dvh` (full viewport height), so omitting `height` is recommended for true full-screen mode.
6868

6969
```html
7070
<body style="margin: 0">
@@ -73,17 +73,25 @@ To enable full screen, add `margin: 0` to <code>body</code> style, and confirm y
7373
Chatbot.initFull({
7474
chatflowid: '<chatflowid>',
7575
apiHost: 'http://localhost:3000',
76-
theme: {
77-
chatWindow: {
78-
// height: 700, don't set height
79-
// width: 400, don't set width
80-
},
81-
},
8276
});
8377
</script>
8478
</body>
8579
```
8680

81+
#### Responsive height and width
82+
83+
`height` and `width` accept a **number** (pixels) or a **CSS string**:
84+
85+
| Value | Behaviour |
86+
|---|---|
87+
| `height: 700` | Fixed 700px, automatically shrinks on smaller screens |
88+
| `height: '700px'` | Same as above via string |
89+
| `height: '80dvh'` | Responsive — 80% of viewport height on all screen sizes |
90+
| `height: 'min(700px, 80dvh)'` | Caps at 700px on large screens, shrinks proportionally on small screens |
91+
| `height: '100%'` | Relative to the `<flowise-fullchatbot>` host element — only works if the host has an explicit height set (e.g. via CSS). Use `'100dvh'` or omit `height` for full-viewport behaviour instead. |
92+
93+
The same options apply to `width`.
94+
8795
## Configuration
8896

8997
You can also customize chatbot with different configuration
@@ -162,8 +170,8 @@ You can also customize chatbot with different configuration
162170
errorMessage: 'This is a custom error message',
163171
backgroundColor: '#ffffff',
164172
backgroundImage: 'enter image path or link', // If set, this will overlap the background color of the chat window.
165-
height: 700,
166-
width: 400,
173+
height: 700, // number (px) or CSS string e.g. '80dvh', 'min(700px, 80dvh)'
174+
width: 400, // number (px) or CSS string e.g. '400px', '50vw'
167175
fontSize: 16,
168176
starterPrompts: ['What is a bot?', 'Who are you?'], // It overrides the starter prompts set by the chat flow passed
169177
starterPromptFontSize: 15,

‎dist/features/bubble/components/Bubble.d.ts.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/features/bubble/types.d.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,8 +60,8 @@ export type ChatWindowTheme = {
6060
errorMessage?: string;
6161
backgroundColor?: string;
6262
backgroundImage?: string;
63-
height?: number;
64-
width?: number;
63+
height?: number | string;
64+
width?: number | string;
6565
fontSize?: number;
6666
userMessage?: UserMessageTheme;
6767
botMessage?: BotMessageTheme;

‎dist/features/bubble/types.d.ts.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/features/full/components/Full.d.ts.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/utils/isMobileSignal.d.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
1-
export declare const isMobile: import("solid-js").Accessor<boolean | undefined>, setIsMobile: import("solid-js").Setter<boolean | undefined>;
1+
export declare const isMobile: import("solid-js").Accessor<boolean>, setIsMobile: import("solid-js").Setter<boolean>;
22
//# sourceMappingURL=isMobileSignal.d.ts.map

‎dist/utils/isMobileSignal.d.ts.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/web.js‎

Lines changed: 78 additions & 20 deletions
Large diffs are not rendered by default.

‎dist/web.umd.js‎

Lines changed: 78 additions & 20 deletions
Large diffs are not rendered by default.

0 commit comments

Comments
 (0)