Skip to main content

Buttons

Properties related to button styling.

customButtons​

Array defining object configs for custom buttons.
styles is used to define the styling options for buttons and dropup items.
position is used to set the button location.
initialState is the initial button state when the chat loads.
setState is used to change the button state programmatically.
onClick is used to assign a function that is triggered when the button is clicked. 

<deep-chat customButtons="[{}]"></deep-chat>

submitButtonStyles​

Custom styling for the submit button.
submit state is displayed when the user's input is valid and can be sent.
loading is used when waiting for a message response from the target server.
stop is used when a message response is being streamed.
disabled is used when the user's input cannot be sent (see validateInput) or the websocket connection is not live. You can also set this state manually by calling the disableSubmitButton method.
alwaysEnabled prevents the disabled button state from being used.
position sets the button position within the input area.

info

The loading, stop and disabled styles will automatically inherit your submit style default state values.

SVG Example​

<deep-chat
  submitButtonStyles='{
    "submit": {
      "container": {
        "default": {"backgroundColor": "#e3f0ff"},
        "hover": {"backgroundColor": "#c6e1ff"},
        "click": {"backgroundColor": "#acd3ff"}
      },
      "svg": {
        "styles": {
          "default": {
            "filter":
              "brightness(0) saturate(100%) invert(58%) sepia(53%) saturate(6828%) hue-rotate(214deg) brightness(100%) contrast(100%)"
          }
        }
      }
    },
    "alwaysEnabled": true,
    "position": "outside-right"
  }'
></deep-chat>

Text Example​

It is important to note that the submit state's default properties are automatically copied into the other states, however hover and submit need to be defined.

<deep-chat
  submitButtonStyles='{
    "submit": {
      "container": {
        "default": {"backgroundColor": "#ddedff"},
        "hover": {"backgroundColor": "#c6e1ff"},
        "click": {"backgroundColor": "#acd3ff"}
      },
      "text": {
        "content": "Submit",
        "styles": {"default": {"color": "#6c6c6c"}, "hover": {"color": "#2c2c2c"}}
      },
      "svg": {"content": ""}
    },
    "loading": {
      "text": {"content": "Loading"},
      "svg": {"content": ""}
    },
    "stop": {
      "container": {
        "hover": {"backgroundColor": "#c6e1ff"},
        "click": {"backgroundColor": "#acd3ff"}
      },
      "text": {"content": "Stop"},
      "svg": {"content": ""}
    },
    "alwaysEnabled": true
  }'
></deep-chat>

Disabled example​

<deep-chat
  submitButtonStyles='{
    "disabled": {
      "container": {"default": {"cursor": "auto"}},
      "svg": {
        "content": "<?xml version=\"1.0\" encoding=\"utf-8\"?> <svg viewBox=\"0 0 25 25\" xmlns=\"http://www.w3.org/2000/svg\"> <path fill-rule=\"evenodd\" d=\"M5.781 4.414a7 7 0 019.62 10.039l-9.62-10.04zm-1.408 1.42a7 7 0 009.549 9.964L4.373 5.836zM10 1a9 9 0 100 18 9 9 0 000-18z\"/> </svg>",
        "styles": {"default": {"paddingTop": "2.4px", "paddingLeft": "2px"}}
      }
    }
  }'
></deep-chat>

Combination Example​

<deep-chat
  submitButtonStyles='{
    "submit": {
      "container": {
        "default": {"backgroundColor": "#ddedff"},
        "hover": {"backgroundColor": "#c6e1ff"},
        "click": {"backgroundColor": "#acd3ff"}
      },
      "text": {
        "content": "Send",
        "styles": {"default": {"color": "#6c6c6c"}, "hover": {"color": "#2c2c2c"}}
      }
    },
    "loading": {
      "container": {"default": {"backgroundColor": "unset"}},
      "text": {"content": "Loading"},
      "svg": {
        "content":
          "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<svg viewBox=\"0 0 32 32\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n<title>stop</title>\n<path d=\"M5.92 24.096q0 0.832 0.576 1.408t1.44 0.608h16.128q0.832 0 1.44-0.608t0.576-1.408v-16.16q0-0.832-0.576-1.44t-1.44-0.576h-16.128q-0.832 0-1.44 0.576t-0.576 1.44v16.16z\"></path>\n</svg>"
      }
    },
    "stop": {
      "container": {"default": {"backgroundColor": "unset"}},
      "text": {"content": "Stop"},
      "svg": {
        "content":
          "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<svg viewBox=\"0 0 32 32\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n<title>stop</title>\n<path d=\"M5.92 24.096q0 0.832 0.576 1.408t1.44 0.608h16.128q0.832 0 1.44-0.608t0.576-1.408v-16.16q0-0.832-0.576-1.44t-1.44-0.576h-16.128q-0.832 0-1.44 0.576t-0.576 1.44v16.16z\"></path>\n</svg>"
      }
    },
    "disabled": {"text": {"content": "Waiting"}}
  }'
></deep-chat>

Custom Button Types​

Types shared by custom button properties:

CustomButtonState​

  • Type: "default" | "active" | "disabled"

Available states for the custom button.

CustomButtonStyles​

Styling for the states of a custom button.

Example​

<deep-chat
  customButtons='[
    {
      "styles": {
        "button": {
          "default": {
            "svg": {
              "styles": {
                "default": {
                  "filter":
                    "brightness(0) saturate(100%) invert(42%) sepia(81%) saturate(1870%) hue-rotate(85deg) brightness(106%) contrast(103%)"
                }
              }
            },
            "text": {
              "styles": {"default": {"color": "#09C000"}},
              "content": "Button"
            }}}}}
  ]'
></deep-chat>

CustomDropupItemStyles​

Styling for the states of a custom dropup item.

CustomDropupItemStateStyles​

Styling for a custom item inside the dropup menu.
Tthe dropup item svg icon and text are defined via the content property in CustomButtonStyles.
For default and other dropup styles see dropupStyles.

Example​

<deep-chat
  customButtons='[
    {
      "styles": {
        "dropup": {
          "default": {
            "text": {"color": "green"},
            "item": {"default": {"border": "1px solid green"}},
            "iconContainer": {
              "filter": "brightness(0) saturate(100%) invert(23%) sepia(67%) saturate(2914%) hue-rotate(104deg) brightness(99%) contrast(103%)"
            }
          }
        },
        "button": {
          "default": {
            "text": {
              "content": "Button"
            }}}}}
  ]'
></deep-chat>

SetCustomButtonState​

Change button state programmatically.

Example​

chatElementRef.customButtons[0].setState('active');

OnClickCustomButton​

Assign a function that is triggered when the custom button is clicked.
You can optionaly return a CustomButtonState string to give the button a new state.

Example​

chatElementRef.customButtons[0].onClick = (state) => (state === 'default' ? 'active' : 'default');

Types​

Types shared by button styles properties.

Button​

Styling preferences for a button inside the chat view.
styles defines the button styling.
position is used to set the button location.

Example​

<deep-chat
  images='{
    "button": {
      "styles": {
        "container": {
          "default": {"backgroundColor": "#e6f0ff"},
          "hover": {"backgroundColor": "#dbe9ff"},
          "click": {"backgroundColor": "#c4dbff"}
        }
      },
      "position": "outside-left"
    }
  }'
></deep-chat>

ButtonStyles​

Styling for a button inside the chat view.
container is used to style the base element of the button for its various mouse states.
svg is used to style an svg icon (the default inner element) inside the button.
text is used to create and style a text icon inside the button.

Example​

<deep-chat
  submitButtonStyles='{
    "submit": {
      "container": {
        "default": {"backgroundColor": "black"},
        "hover": {"backgroundColor": "#3D3D3D"},
        "click": {"backgroundColor": "#555555"}
      },
      "svg": {
        "styles": {
          "default": {
            "filter":
              "brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(273deg) brightness(103%) contrast(103%)"
          }
        },
        "content":
        "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n<path d=\"M12 5V19M12 5L6 11M12 5L18 11\" stroke=\"#000000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>"          }
    }
  }'
  images='{
    "button": {
      "styles": {
        "container": {
          "default": {"backgroundColor": "unset", "width": "1.4em", "bottom": "0.75em"}
        },
        "svg": {
          "content": "<?xml version=\"1.0\" ?> <svg viewBox=\"0 0 20 20\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"> <g id=\"layer1\"> <path d=\"M 10,2 C 4.5399633,2 0,5.5155856 0,10 a 0.50005,0.50005 0 0 0 0,0.002 c 0.00211683,0.498935 0.0623158,0.997281 0.1796875,1.486328 a 0.50005,0.50005 0 0 0 0.65625,0.353516 c 0.166982,-0.06005 0.3346003,-0.11455 0.5058594,-0.162109 3.2465843,-0.86948 6.3865589,0.651858 7.0898437,3.277343 0.1999132,0.753403 0.1847938,1.55275 -0.046875,2.341797 A 0.50005,0.50005 0 0 0 8.8144531,17.9375 C 9.2066201,17.97715 9.6008792,17.99763 9.9960938,18 A 0.50005,0.50005 0 0 0 10,18 C 15.460037,18 20,14.484414 20,10 20,5.5155856 15.460037,2 10,2 Z m 0,1 c 5.033373,0 9,3.2001431 9,7 0,3.798831 -3.964655,6.998273 -8.996094,7 C 9.7877816,16.9987 9.5727572,16.978264 9.3574219,16.964844 9.490202,16.205055 9.5915438,15.434329 9.3964844,14.699219 8.5282549,11.457966 4.7749194,9.7293469 1.0878906,10.714844 1.0549598,10.475808 1.0010202,10.238508 1,9.9980469 1.0013454,6.1990381 4.9674803,3 10,3 Z M 9.5,4 C 8.677494,4 8,4.677495 8,5.5 8,6.322505 8.677494,7 9.5,7 10.322505,7 11,6.322505 11,5.5 11,4.677495 10.322505,4 9.5,4 Z m -4,1 C 4.677495,5 4,5.677495 4,6.5 4,7.322505 4.677495,8 5.5,8 6.322505,8 7,7.322505 7,6.5 7,5.677495 6.322505,5 5.5,5 Z m 4,0 C 9.782065,5 10,5.217935 10,5.5 10,5.782065 9.782065,6 9.5,6 9.217935,6 9,5.782065 9,5.5 9,5.217935 9.217935,5 9.5,5 Z m 4,0 C 12.677494,5 12,5.677495 12,6.5 12,7.322505 12.677494,8 13.5,8 14.322505,8 15,7.322505 15,6.5 15,5.677495 14.322505,5 13.5,5 Z m -8,1 C 5.782065,6 6,6.217935 6,6.5 6,6.782065 5.782065,7 5.5,7 5.217935,7 5,6.782065 5,6.5 5,6.217935 5.217935,6 5.5,6 Z m 8,0 C 13.782065,6 14,6.217935 14,6.5 14,6.782065 13.782065,7 13.5,7 13.217935,7 13,6.782065 13,6.5 13,6.217935 13.217935,6 13.5,6 Z m 3,2 C 15.677494,8 15,8.677495 15,9.5 15,10.322505 15.677494,11 16.5,11 17.322505,11 18,10.322505 18,9.5 18,8.677495 17.322505,8 16.5,8 Z m 0,1 C 16.782065,9 17,9.217935 17,9.5 17,9.782065 16.782065,10 16.5,10 16.217935,10 16,9.782065 16,9.5 16,9.217935 16.217935,9 16.5,9 Z m -3,3 C 12.677494,12 12,12.677495 12,13.5 12,14.322505 12.677494,15 13.5,15 14.322505,15 15,14.322505 15,13.5 15,12.677495 14.322505,12 13.5,12 Z m 0,1 C 13.782065,13 14,13.217935 14,13.5 14,13.782065 13.782065,14 13.5,14 13.217935,14 13,13.782065 13,13.5 13,13.217935 13.217935,13 13.5,13 Z\" style=\"fill:#222222; fill-opacity:1; stroke:none; stroke-width:0px;\"/> </g> </svg>",
          "styles": {
            "default": {
              "filter":
                "brightness(0) saturate(100%) invert(45%) sepia(20%) saturate(0%) hue-rotate(255deg) brightness(99%) contrast(101%)"
            },
            "hover": {
              "filter":
                "brightness(0) saturate(100%) invert(61%) sepia(41%) saturate(5169%) hue-rotate(187deg) brightness(99%) contrast(105%)"
            },
            "click": {
              "filter":
                "brightness(0) saturate(100%) invert(58%) sepia(68%) saturate(541%) hue-rotate(179deg) brightness(104%) contrast(100%)"
            }
          }
        }
      }
    }
  }'
></deep-chat>
tip

You can use the CSSFilterConverter tool to generate filter values for the icon color.

ButtonInnerStyles​

Styling for an element inside a button container.
styles is used to set the style of the element for its various mouse states.
content is a string that is used to generate the inner element. When it is inside a text property - the string generates the element text. When inside an svg property - the string needs to be a full inlined svg element HTML which will be used to generate the icon.

info

To not display an svg or text, set the content property to an empty string e.g. content: "".

info

If the content string is used for an svg:

  • It needs to contain a xmlns="http://www.w3.org/2000/svg" attribute.
  • If it is inside a HTML attribute (the parentmost object is inside quotes " - see the editable example) or when not using backticks (`) - make sure to escape the quotes by changing " to \" (An easy way to do this is to stringify it using JSON.stringify()). Also when inside a HTML attribute, replace the first < character with &lt.

ButtonPosition​

  • Type: "inside-left" | "inside-right" | "outside-left" | "outside-right" | "dropup-menu"

Position for a button either inside the text input container, outside it (either left or right) or inside the dropup menu.

Example​

<deep-chat
  gifs='{"button": {"position": "dropup-menu"}}'
  audio='{"button": {"position": "dropup-menu"}}'
  camera='{"button": {"position": "dropup-menu"}}'
  mixedFiles='{"button": {"position": "inside-left"}}'
  microphone='{"button": {"position": "outside-right"}}'
></deep-chat>

MicrophoneStyles​

Custom styling for the microphone button.
default is used for the default button state.
active is used when the microphone is active.
unsupported is used when recording is not supported on the user's browser.
position is the button position within the input area.

<deep-chat
  microphone='{
    "button": {
      "default": {
        "container": {
          "hover": {"backgroundColor": "#7fbded69"},
          "click": {"backgroundColor": "#4babf669"}
        },
        "svg": {
          "styles": {
            "default": {
              "filter":
                "brightness(0) saturate(100%) invert(49%) sepia(53%) saturate(6895%) hue-rotate(200deg) brightness(101%) contrast(101%)"
            },
            "hover": {
              "filter":
                "brightness(0) saturate(100%) invert(27%) sepia(59%) saturate(5655%) hue-rotate(203deg) brightness(101%) contrast(84%)"
            }
          }
        }
      },
      "active": {
        "container": {
          "hover": {"backgroundColor": "#ffd07c70"},
          "click": {"backgroundColor": "#ecb85c70"}
        },
        "svg": {
          "styles": {
            "default": {
              "filter":
                "brightness(0) saturate(100%) invert(49%) sepia(99%) saturate(477%) hue-rotate(343deg) brightness(100%) contrast(101%)"
            }
          }
        }
      }
    }
  }'
></deep-chat>
tip

You can use the CSSFilterConverter tool to generate filter values for the icon color.