Line data    Source code

       1              : import * as React from 'react';
       2              : 
       3              : import { classNames } from '../../utils/classnames.js';
       4              : import type { SessionScripts } from '../scripts/session_scripts.js';
       5              : import type { ModifySessionScripts } from '../scripts/session_scripts_registry.js';
       6              : import { SessionInputCard } from './session_input_card.js';
       7              : import { useApplySessionInput } from './use_apply_session_input.js';
       8              : import { deriveSessionInputs } from './session_inputs.js';
       9              : 
      10              : import * as styles from './session_inputs.module.css';
      11              : 
      12              : interface Props {
      13              :     sessionScripts: SessionScripts;
      14              :     modifySessionScripts: ModifySessionScripts;
      15              :     /// Chips that go before the inputs, e.g. the attachments of the feed
      16              :     leading?: React.ReactNode;
      17              :     /// Content below the chips, e.g. the open drawer of the attachments
      18              :     below?: React.ReactNode;
      19              :     className?: string;
      20              : }
      21              : 
      22              : /// The inputs of a session as chips on a bar at the top of a view. Renders nothing
      23              : /// without inputs and leading chips.
      24            1 : export function SessionInputStrip(props: Props): React.ReactElement | null {
      25            1 :     const inputs = deriveSessionInputs(props.sessionScripts);
      26            1 :     const { apply, literalOf, busyInputs } = useApplySessionInput(props.sessionScripts, props.modifySessionScripts);
      27            1 :     const empty = inputs.length === 0 && props.leading == null;
      28            1 :     if (empty) return null;
      29            1 :     return (
      30            1 :         <div className={classNames(styles.strip, props.className)} data-testid="session-input-strip">
      31            1 :             <div className={styles.chips} role="group" aria-label="Inputs of the session">
      32            1 :                 {props.leading}
      33            1 :                 {inputs.map(input => (
      34            0 :                     <SessionInputCard
      35            0 :                         key={input.name}
      36            0 :                         input={input}
      37            0 :                         busy={busyInputs.has(input.name)}
      38            0 :                         literalOf={literalOf}
      39            0 :                         onCommit={apply}
      40            0 :                     />
      41            1 :                 ))}
      42            1 :             </div>
      43            1 :             {props.below}
      44            1 :         </div>
      45              :     );
      46            1 : }