@lg-chat/input-bar

Input Bar

Installation

Yarn

yarn add @lg-chat/input-bar

NPM

npm install @lg-chat/input-bar

Example

import { InputBar } from '@lg-chat/input-bar';

return <InputBar badgeText="Beta" />;

Output HTML

<form class="leafygreen-ui-xw0iqe">
  <div class="leafygreen-ui-1yu3c6o">
    <div class="leafygreen-ui-18jjswl">
      <svg
        width="16"
        height="16"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 16 16"
        class="leafygreen-ui-jc2z8v"
        role="img"
        aria-label="Wizard Icon"
      >
        <path
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M13.327 3.277c.188-.38-.236-.8-.618-.613l-2.513 1.223a.461.461 0 01-.523-.095L7.603 1.74c-.314-.313-.829-.062-.75.365l.517 2.808a.421.421 0 01-.228.46L4.63 6.596c-.383.186-.277.761.154.839l2.832.513a.477.477 0 01.382.379l.517 2.808c.079.427.659.532.846.153l1.234-2.492a.427.427 0 01.464-.225l2.832.512c.43.078.683-.432.368-.744l-2.07-2.052a.452.452 0 01-.095-.519l1.233-2.491zM7 10.5c.353-.35.312-.958-.091-1.359-.404-.4-1.017-.44-1.37-.09L1.84 12.713c-.353.35-.312.958.092 1.358.403.4 1.017.44 1.37.09L7 10.5z"
          fill="currentColor"
        ></path>
      </svg>
      <div class="leafygreen-ui-1qtf7xy">Beta</div>
    </div>
    <textarea
      placeholder="Type your message here"
      class="leafygreen-ui-1iwn37a"
      style="height: 20px !important;"
    ></textarea>
    <div class="leafygreen-ui-37kxwn">
      <button
        type="submit"
        class="lg-ui-button-0000 leafygreen-ui-118vxo3"
        aria-disabled="false"
      >
        <div class="leafygreen-ui-v038xi"></div>
        <div class="leafygreen-ui-v95oty">
          Enter<svg
            width="16"
            height="16"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 16 16"
            class="leafygreen-ui-15rby6h"
            role="presentation"
            aria-hidden="true"
            alt=""
          >
            <path
              d="M3 6.832h6.944L8.41 5.297a1 1 0 010-1.414l.24-.239a1 1 0 011.414 0l3.382 3.383c.01.008.018.017.027.026l.24.239a1 1 0 010 1.414l-3.652 3.651a1 1 0 01-1.414 0l-.239-.239a1 1 0 010-1.414L9.941 9.17H3a1 1 0 01-1-1v-.338a1 1 0 011-1z"
              fill="currentColor"
            ></path>
          </svg>
        </div>
      </button>
    </div>
  </div>
</form>

Properties

Prop	Type	Description	Default
badgeText	string	If provided, renders a badge with text next to the wizard icon
darkMode	boolean	Determines if the component will render in dark mode	false
onMessageSend	(messageBody: string, e: FormEvent) => void	Callback fired when message is sent
shouldRenderGradient	boolean	Determines if component renders with gradient box-shadow	true
textAreaProps	TextareaAutosizeProps	TextareaAutosize props spread on textarea component
disabled	boolean	Determines whether the user can interact with the InputBar
disableSend	boolean	When defined as true, disables the send action and button
...	HTMLElementProps<'form'>	Props spread on the root element

TextareaAutosizeProps

Prop	Type	Description	Default
maxRows	number	maximum number of rows to display
minRows	number	minimum number of rows to display