@lobehub/ui/es/mobile/ChatInputArea/ChatInputArea.mjs.map

Lobe UI is an open-source UI component library for building AIGC web apps

{"version":3,"file":"ChatInputArea.mjs","names":["Flexbox"],"sources":["../../../src/mobile/ChatInputArea/ChatInputArea.tsx"],"sourcesContent":["'use client';\n\nimport { useSize } from 'ahooks';\nimport { cx } from 'antd-style';\nimport { ChevronDown, ChevronUp } from 'lucide-react';\nimport {\n  type FC,\n  memo,\n  type PropsWithChildren,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport ChatInputAreaInner from '@/chat/ChatInputArea/components/ChatInputAreaInner';\nimport { Flexbox } from '@/Flex';\nimport SafeArea from '@/mobile/SafeArea';\n\nimport { styles } from './style';\nimport { type ChatInputAreaProps } from './type';\n\nconst ChatInputArea = memo<ChatInputAreaProps>(\n  ({\n    ref,\n    className,\n    style,\n    topAddons,\n    textAreaLeftAddons,\n    textAreaRightAddons,\n    bottomAddons,\n    expand = false,\n    setExpand,\n    onSend,\n    onInput,\n    loading,\n    value,\n    safeArea,\n  }) => {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const size = useSize(containerRef);\n    const [showFullscreen, setShowFullscreen] = useState<boolean>(false);\n    const [isFocused, setIsFocused] = useState<boolean>(false);\n\n    useEffect(() => {\n      if (!size?.height) return;\n      setShowFullscreen(size.height > 72);\n    }, [size]);\n\n    const InnerContainer: FC<\n      PropsWithChildren & {\n        bottomAddons?: ReactNode;\n        textAreaLeftAddons?: ReactNode;\n        textAreaRightAddons?: ReactNode;\n        topAddons?: ReactNode;\n      }\n    > = useCallback(\n      ({ children, ...r }) =>\n        expand ? (\n          <Flexbox className={styles.inner} gap={8}>\n            <Flexbox horizontal gap={8} justify={'flex-end'}>\n              {r.textAreaLeftAddons}\n              {r.textAreaRightAddons}\n            </Flexbox>\n            {children}\n            {r.topAddons}\n            {r.bottomAddons}\n          </Flexbox>\n        ) : (\n          <Flexbox horizontal align={'flex-end'} className={styles.inner} gap={8}>\n            {r.textAreaLeftAddons}\n            {children}\n            {r.textAreaRightAddons}\n          </Flexbox>\n        ),\n      [expand, loading],\n    );\n\n    const showAddons = !expand && !isFocused;\n\n    return (\n      <Flexbox\n        className={cx(styles.container, expand && styles.expand, className)}\n        gap={12}\n        style={style}\n      >\n        {topAddons && <Flexbox style={showAddons ? {} : { display: 'none' }}>{topAddons}</Flexbox>}\n        <Flexbox\n          className={cx(expand && styles.expand)}\n          ref={containerRef}\n          style={{ position: 'relative' }}\n        >\n          {showFullscreen && (\n            <ActionIcon\n              active\n              className={styles.expandButton}\n              icon={expand ? ChevronDown : ChevronUp}\n              id={'sssssss'}\n              size={{ blockSize: 24, borderRadius: '50%', size: 14 }}\n              style={expand ? { top: 6 } : {}}\n              onClick={() => setExpand?.(!expand)}\n            />\n          )}\n          <InnerContainer\n            bottomAddons={bottomAddons}\n            textAreaLeftAddons={textAreaLeftAddons}\n            textAreaRightAddons={textAreaRightAddons}\n            topAddons={topAddons}\n          >\n            <ChatInputAreaInner\n              autoSize={expand ? false : { maxRows: 6, minRows: 1 }}\n              className={styles.expandTextArea}\n              loading={loading}\n              ref={ref}\n              style={{ height: 36, paddingBlock: 6 }}\n              value={value}\n              variant={expand ? 'borderless' : 'filled'}\n              onBlur={() => setIsFocused(false)}\n              onFocus={() => setIsFocused(true)}\n              onInput={onInput}\n              onSend={onSend}\n            />\n          </InnerContainer>\n        </Flexbox>\n        {bottomAddons && (\n          <Flexbox style={showAddons ? {} : { display: 'none' }}>{bottomAddons}</Flexbox>\n        )}\n        {safeArea && !isFocused && <SafeArea position={'bottom'} />}\n      </Flexbox>\n    );\n  },\n);\n\nChatInputArea.displayName = 'ChatInputArea';\n\nexport default ChatInputArea;\n"],"mappings":";;;;;;;;;;;;AAwBA,MAAM,gBAAgB,MACnB,EACC,KACA,WACA,OACA,WACA,oBACA,qBACA,cACA,SAAS,OACT,WACA,QACA,SACA,SACA,OACA,eACI;CACJ,MAAM,eAAe,OAAuB,KAAK;CACjD,MAAM,OAAO,QAAQ,aAAa;CAClC,MAAM,CAAC,gBAAgB,qBAAqB,SAAkB,MAAM;CACpE,MAAM,CAAC,WAAW,gBAAgB,SAAkB,MAAM;AAE1D,iBAAgB;AACd,MAAI,CAAC,MAAM,OAAQ;AACnB,oBAAkB,KAAK,SAAS,GAAG;IAClC,CAAC,KAAK,CAAC;CAEV,MAAM,iBAOF,aACD,EAAE,UAAU,GAAG,QACd,SACE,qBAACA,mBAAD;EAAS,WAAW,OAAO;EAAO,KAAK;YAAvC;GACE,qBAACA,mBAAD;IAAS,YAAA;IAAW,KAAK;IAAG,SAAS;cAArC,CACG,EAAE,oBACF,EAAE,oBACK;;GACT;GACA,EAAE;GACF,EAAE;GACK;MAEV,qBAACA,mBAAD;EAAS,YAAA;EAAW,OAAO;EAAY,WAAW,OAAO;EAAO,KAAK;YAArE;GACG,EAAE;GACF;GACA,EAAE;GACK;KAEd,CAAC,QAAQ,QAAQ,CAClB;CAED,MAAM,aAAa,CAAC,UAAU,CAAC;AAE/B,QACE,qBAACA,mBAAD;EACE,WAAW,GAAG,OAAO,WAAW,UAAU,OAAO,QAAQ,UAAU;EACnE,KAAK;EACE;YAHT;GAKG,aAAa,oBAACA,mBAAD;IAAS,OAAO,aAAa,EAAE,GAAG,EAAE,SAAS,QAAQ;cAAG;IAAoB,CAAA;GAC1F,qBAACA,mBAAD;IACE,WAAW,GAAG,UAAU,OAAO,OAAO;IACtC,KAAK;IACL,OAAO,EAAE,UAAU,YAAY;cAHjC,CAKG,kBACC,oBAAC,YAAD;KACE,QAAA;KACA,WAAW,OAAO;KAClB,MAAM,SAAS,cAAc;KAC7B,IAAI;KACJ,MAAM;MAAE,WAAW;MAAI,cAAc;MAAO,MAAM;MAAI;KACtD,OAAO,SAAS,EAAE,KAAK,GAAG,GAAG,EAAE;KAC/B,eAAe,YAAY,CAAC,OAAO;KACnC,CAAA,EAEJ,oBAAC,gBAAD;KACgB;KACM;KACC;KACV;eAEX,oBAAC,oBAAD;MACE,UAAU,SAAS,QAAQ;OAAE,SAAS;OAAG,SAAS;OAAG;MACrD,WAAW,OAAO;MACT;MACJ;MACL,OAAO;OAAE,QAAQ;OAAI,cAAc;OAAG;MAC/B;MACP,SAAS,SAAS,eAAe;MACjC,cAAc,aAAa,MAAM;MACjC,eAAe,aAAa,KAAK;MACxB;MACD;MACR,CAAA;KACa,CAAA,CACT;;GACT,gBACC,oBAACA,mBAAD;IAAS,OAAO,aAAa,EAAE,GAAG,EAAE,SAAS,QAAQ;cAAG;IAAuB,CAAA;GAEhF,YAAY,CAAC,aAAa,oBAAC,UAAD,EAAU,UAAU,UAAY,CAAA;GACnD;;EAGf;AAED,cAAc,cAAc"}