@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":["InnerContainer: FC<\n      PropsWithChildren & {\n        bottomAddons?: ReactNode;\n        textAreaLeftAddons?: ReactNode;\n        textAreaRightAddons?: ReactNode;\n        topAddons?: ReactNode;\n      }\n    >","Flexbox","ActionIcon","ChatInputAreaInner","SafeArea"],"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  FC,\n  PropsWithChildren,\n  ReactNode,\n  memo,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport { Flexbox } from '@/Flex';\nimport ChatInputAreaInner from '@/chat/ChatInputArea/components/ChatInputAreaInner';\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 gap={8} horizontal justify={'flex-end'}>\n              {r.textAreaLeftAddons}\n              {r.textAreaRightAddons}\n            </Flexbox>\n            {children}\n            {r.topAddons}\n            {r.bottomAddons}\n          </Flexbox>\n        ) : (\n          <Flexbox align={'flex-end'} className={styles.inner} gap={8} horizontal>\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              onClick={() => setExpand?.(!expand)}\n              size={{ blockSize: 24, borderRadius: '50%', size: 14 }}\n              style={expand ? { top: 6 } : {}}\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              onBlur={() => setIsFocused(false)}\n              onFocus={() => setIsFocused(true)}\n              onInput={onInput}\n              onSend={onSend}\n              ref={ref}\n              style={{ height: 36, paddingBlock: 6 }}\n              value={value}\n              variant={expand ? 'borderless' : 'filled'}\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,MAAMA,iBAOF,aACD,EAAE,UAAU,GAAG,QACd,SACE,qBAACC;EAAQ,WAAW,OAAO;EAAO,KAAK;;GACrC,qBAACA;IAAQ,KAAK;IAAG;IAAW,SAAS;eAClC,EAAE,oBACF,EAAE;KACK;GACT;GACA,EAAE;GACF,EAAE;;GACK,GAEV,qBAACA;EAAQ,OAAO;EAAY,WAAW,OAAO;EAAO,KAAK;EAAG;;GAC1D,EAAE;GACF;GACA,EAAE;;GACK,EAEd,CAAC,QAAQ,QAAQ,CAClB;CAED,MAAM,aAAa,CAAC,UAAU,CAAC;AAE/B,QACE,qBAACA;EACC,WAAW,GAAG,OAAO,WAAW,UAAU,OAAO,QAAQ,UAAU;EACnE,KAAK;EACE;;GAEN,aAAa,oBAACA;IAAQ,OAAO,aAAa,EAAE,GAAG,EAAE,SAAS,QAAQ;cAAG;KAAoB;GAC1F,qBAACA;IACC,WAAW,GAAG,UAAU,OAAO,OAAO;IACtC,KAAK;IACL,OAAO,EAAE,UAAU,YAAY;eAE9B,kBACC,oBAACC;KACC;KACA,WAAW,OAAO;KAClB,MAAM,SAAS,cAAc;KAC7B,IAAI;KACJ,eAAe,YAAY,CAAC,OAAO;KACnC,MAAM;MAAE,WAAW;MAAI,cAAc;MAAO,MAAM;MAAI;KACtD,OAAO,SAAS,EAAE,KAAK,GAAG,GAAG,EAAE;MAC/B,EAEJ,oBAAC;KACe;KACM;KACC;KACV;eAEX,oBAACC;MACC,UAAU,SAAS,QAAQ;OAAE,SAAS;OAAG,SAAS;OAAG;MACrD,WAAW,OAAO;MACT;MACT,cAAc,aAAa,MAAM;MACjC,eAAe,aAAa,KAAK;MACxB;MACD;MACH;MACL,OAAO;OAAE,QAAQ;OAAI,cAAc;OAAG;MAC/B;MACP,SAAS,SAAS,eAAe;OACjC;MACa;KACT;GACT,gBACC,oBAACF;IAAQ,OAAO,aAAa,EAAE,GAAG,EAAE,SAAS,QAAQ;cAAG;KAAuB;GAEhF,YAAY,CAAC,aAAa,oBAACG,oBAAS,UAAU,WAAY;;GACnD;EAGf;AAED,cAAc,cAAc;AAE5B,4BAAe"}