5.1.0 • Published 10 months ago

@lg-chat/input-bar v5.1.0

Weekly downloads
-
License
Apache-2.0
Repository
-
Last release
10 months ago

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

PropTypeDescriptionDefault
badgeTextstringIf provided, renders a badge with text next to the wizard icon
darkModebooleanDetermines if the component will render in dark modefalse
onMessageSend(messageBody: string, e: FormEvent) => voidCallback fired when message is sent
shouldRenderGradientbooleanDetermines if component renders with gradient box-shadowtrue
shouldRenderHotkeyIndicatorbooleanDetermines if component renders with hotkey indicatorfalse
textAreaPropsTextareaAutosizePropsTextareaAutosize props spread on textarea component
disabledbooleanDetermines whether the user can interact with the InputBar
disableSendbooleanWhen defined as true, disables the send action and button
...HTMLElementProps<'form'>Props spread on the root element

TextareaAutosizeProps

PropTypeDescriptionDefault
maxRowsnumbermaximum number of rows to display
minRowsnumberminimum number of rows to display