How to make chat Screen full page

[kartikbhalala]

how to make chatwidget full screen? just like chatgpt

[dosubot[bot]]

Hey @kartikbhalala! I'm here to help you with any bugs, questions, or contributions. Let's tackle this together!

To make the chat widget full screen, you can set the width and height properties of the chat window to 100% in the chat_window_style JSON configuration. Here's an example of how you can do it:

<langflow-chat
  chat_inputs='{"your_key":"value"}'
  chat_input_field="your_chat_key"
  flow_id="your_flow_id"
  host_url="langflow_url"
  chat_window_style='{"width":"100%", "height":"100%"}'
></langflow-chat>

This configuration will make the chat widget occupy the full width and height of the screen, similar to a full-screen chat interface like ChatGPT ^[1].

To continue talking to Dosu, mention @dosu.

[kartikbhalala]

@dosu

I tried this but not sure if it is correct or not. I want full screen just like flowise.

like this:

[dosubot[bot]]

To achieve a full-screen chat widget similar to Flowise, ensure that the chat_window_style JSON configuration is set correctly. You should set both width and height to 100% and ensure that the parent container of the chat widget also allows for full-screen display. Here's a refined example:

<langflow-chat
  chat_inputs='{"your_key":"value"}'
  chat_input_field="your_chat_key"
  flow_id="your_flow_id"
  host_url="langflow_url"
  chat_window_style='{"width":"100%", "height":"100%", "position":"fixed", "top":"0", "left":"0"}'
></langflow-chat>

Make sure that the parent container or the body of your HTML is set to occupy the full screen as well, like this:

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

This setup should help you achieve a full-screen chat interface.

To continue talking to Dosu, mention @dosu.