@bothub-chat/ui/dist/components/input-message/index.js

Bothub UI Components

import{__rest as i,__awaiter as e}from"tslib";import{jsx as s,jsxs as o}from"react/jsx-runtime";import{useRef as n,useState as t,useCallback as r}from"react";import{InputMessageStyled as d,InputMessageContent as c,InputMessageActions as m,InputMessageUploadFile as a,InputMessageUploadFileLabel as p,InputMessageUploadFileInput as l,InputMessageMain as j,InputMessageEditWrapper as x,InputMessageContentWrapper as g,InputMessageContentInfo as u,InputMessageContentActionText as b,InputMessageContentTextWrapper as h,InputMessageContentTextFiles as y,InputMessageContentTextMessage as f,InputMessageCloseEditButton as k,InputMessageVoiceRecord as v,InputMessageVoiceRecordDot as w,InputMessageVoiceRecordTimeText as F,InputMessageConcatenateWarning as A,InputMessageVoiceFiles as C,InputMessageVoiceTrack as L,InputMessageVoiceFileDelete as V,InputMessageTextArea as D,InputMessageButtons as S,InputMessageVoicePlayButton as T,InputMessageVoicePauseButton as E,InputMessageVoiceButton as q,InputMessageSendButton as P,InputMessageSendIcon as R}from"./styled.js";import"marked";import"../message/styled.js";import"../loader/styled.js";import"../../theme/index.js";import"../loader/three-dots-loader/styled.js";import"../skeleton/index.js";import"unified";import"remark-parse";import"remark-gfm";import"mdast-util-to-markdown";import"../../utils/colors/calculateGrayScale.js";import"../../utils/colors/calculateAccentColors.js";import{formatSeconds as $}from"../../utils/formatSeconds.js";import"../message/context.js";import"styled-components";import"../message/components/code/inline/styled.js";import"../message/components/code/multiline/styled.js";import"@react-spring/web";import"react-markdown";import"react-dom";import"../portal/styled.js";import"../tooltip/styled.js";import"../tooltip/arrow/styled.js";import"../tooltip/context.js";import"../message/components/code/multiline/copy/styled.js";import{CheckSmallIcon as z}from"../../icons/check-small/index.js";import"../../icons/copy/index.js";import"../message/components/code/multiline/content/styled.js";import"../message/components/paragraph/styled.js";import"../message/components/bold/styled.js";import"../message/components/italic/styled.js";import"../message/components/strike/styled.js";import"../message/components/blockquote/styled.js";import"../message/components/hr/styled.js";import"../message/components/pre/styled.js";import"../message/components/table/styled.js";import"../message/components/table/cell/styled.js";import"../message/components/list/styled.js";import"../message/components/list/context.js";import"../message/components/list/item/styled.js";import"../message/components/title/styled.js";import"../message/components/link/styled.js";import"../message/components/image/styled.js";import"../message/components/image/context.js";import"../message/components/image/grid/styled.js";import"../message/components/image/button/styled.js";import"../message/components/image/button/list/styled.js";import"../message/components/document-copy/styled.js";import"../message/components/cite/styled.js";import"../message/markdown/styled.js";import"remark-math";import"rehype-katex";import"katex/dist/katex.min.css";import"../scrollbar/styled.js";import"../scrollbar/shadow/styled.js";import"../scrollbar/style/styled.js";import"../message/timestamp/styled.js";import"../../icons/menu-dot/index.js";import"../../icons/update/index.js";import"../../icons/resend/index.js";import{EditIcon as B}from"../../icons/edit/index.js";import"../../icons/trash/index.js";import"../../icons/thumb-down/index.js";import"../../icons/download-img/index.js";import"../message/actions/styled.js";import"../message/actions/copy-button/styled.js";import"../message/list/styled.js";import"../message/scroll-button/styled.js";import{IconProvider as O}from"../icon/context.js";import"../icon/styled.js";import"../../icons/arrow-down/index.js";import"../../icons/arrow-narrow-left/index.js";import"../../icons/arrow-narrow-right/index.js";import"../../icons/arrow-up/index.js";import"../../icons/bitcoin/index.js";import"../../icons/bot-circle/index.js";import"../../icons/bothub-agg/index.js";import"../../icons/business-colored/index.js";import"../../icons/check-circle/index.js";import{CloseIcon as I}from"../../icons/close/index.js";import"../../icons/email-circle/index.js";import"../../icons/language/index.js";import"../../icons/lock-circle/index.js";import"../../icons/menu/index.js";import"../../icons/medium-circle/index.js";import"../../icons/tg-circle/index.js";import"../../icons/tg-colored/index.js";import"../../icons/youcassa/index.js";import"../../icons/dashboard/index.js";import"../../icons/user-profile/index.js";import"../../icons/logout/index.js";import"../../icons/habr-2/index.js";import"../../icons/arrow-2-down/index.js";import"../../icons/links/index.js";import"../../icons/free/index.js";import"../../icons/hotness/index.js";import"../../icons/checked/index.js";import"../../icons/ai/index.js";import"../../icons/bookmarks/index.js";import"../../icons/bookmarks-big/index.js";import"../../icons/chat/index.js";import"../../icons/chats/index.js";import"../../icons/coder/index.js";import"../../icons/presets-big/index.js";import"../../icons/referal/index.js";import"../../icons/restore/index.js";import"../../icons/tariff/index.js";import"../../icons/plus-2/index.js";import"../../icons/plus-1/index.js";import"../../icons/send/index.js";import"../../icons/settings/index.js";import"../../icons/habr/index.js";import"../../icons/stop/index.js";import"../../icons/thumb-up/index.js";import"../../icons/star/index.js";import"../../icons/info-big/index.js";import"../../icons/warning-big/index.js";import"../../icons/error-big/index.js";import"../../icons/success-big/index.js";import"../../icons/mj/index.js";import"../../icons/card/index.js";import"../../icons/arrow-narrow-up/index.js";import"../../icons/arrow-narrow-down/index.js";import"../../icons/filters/index.js";import"../../icons/info/index.js";import"../../icons/search-circle/index.js";import"../../icons/save/index.js";import"../../icons/light/index.js";import"../../icons/dark/index.js";import"../../icons/email-colored/index.js";import"../../icons/action-chat/index.js";import{AttachIcon as K}from"../../icons/attach/index.js";import"../../icons/avatar-add/index.js";import"../../icons/brush/index.js";import"../../icons/calendar/index.js";import"../../icons/claude/index.js";import"../../icons/cookie/index.js";import"../../icons/dalle/index.js";import"../../icons/error/index.js";import"../../icons/expand/index.js";import"../../icons/eye/index.js";import"../../icons/face/index.js";import"../../icons/gear/index.js";import"../../icons/gear-min/index.js";import"../../icons/generation/index.js";import"../../icons/gpt-3_5/index.js";import"../../icons/gpt-4/index.js";import"../../icons/imagine/index.js";import"../../icons/imagine-2/index.js";import"../../icons/loader/index.js";import"../../icons/loader-circular/index.js";import"../../icons/loader-circular-gradient/index.js";import"../../icons/loader-circular-gradient-2/index.js";import"../../icons/minus/index.js";import"../../icons/mj-white/index.js";import"../../icons/prompt/index.js";import"../../icons/rabbit/index.js";import"../../icons/ratio-1x1/index.js";import"../../icons/ratio-2x3/index.js";import"../../icons/ratio-3x2/index.js";import"../../icons/ratio-4x5/index.js";import"../../icons/ratio-4x7/index.js";import"../../icons/ratio-5x4/index.js";import"../../icons/ratio-7x4/index.js";import"../../icons/ratio-16x9/index.js";import"../../icons/ratio-9x16/index.js";import"../../icons/ratio-21x9/index.js";import"../../icons/ratio-9x21/index.js";import"../../icons/refferal-min/index.js";import"../../icons/search-data/index.js";import"../../icons/square/index.js";import"../../icons/turtle/index.js";import"../../icons/upscale/index.js";import"../../icons/withdraw/index.js";import"../../icons/search-plus/index.js";import"../../icons/lightning/index.js";import"../../icons/blog-circle/index.js";import"../../icons/stripe/index.js";import"../../icons/corporate/index.js";import"../../icons/public/index.js";import"../../icons/private/index.js";import"../../icons/mistral/index.js";import"../../icons/gemini/index.js";import"../../icons/search-simple/index.js";import"../../icons/sad-robot/index.js";import"../../icons/model/index.js";import"../../icons/phone-colored/index.js";import"../../icons/questions/index.js";import"../../icons/pdf-big/index.js";import"../../icons/xls-big/index.js";import"../../icons/word-big/index.js";import"../../icons/txt-big/index.js";import"../../icons/pdf/index.js";import"../../icons/xls/index.js";import"../../icons/word/index.js";import"../../icons/txt/index.js";import"../../icons/bothub-logo-gradient/index.js";import"../../icons/telegram-logo-gradient/index.js";import"../../icons/decline-circle/index.js";import"../../icons/simple-gear-bg/index.js";import"../../icons/advanced-filter/index.js";import"../../icons/big-corporate/index.js";import"../../icons/big-mj/index.js";import"../../icons/big-models/index.js";import"../../icons/big-stats/index.js";import"../../icons/big-success/index.js";import"../../icons/big-users/index.js";import"../../icons/optional-presets/index.js";import"../../icons/wallet-withdraw/index.js";import"../../icons/big-presets/index.js";import"../../icons/big-favorite/index.js";import"../../icons/big-referal/index.js";import"../../icons/attach-file/index.js";import"../../icons/attach-file-big/index.js";import"../../icons/voice/index.js";import"../../icons/play-button/index.js";import"../../icons/pause-button/index.js";import"../../icons/text-read/index.js";import"../../icons/text-hide/index.js";import"../../icons/best-chat-bots/index.js";import"../../icons/upload/index.js";import"../../icons/enter/index.js";import"../../icons/discord/index.js";import"../../icons/discord-circle/index.js";import"../../icons/black-forest-labs/index.js";import"../../icons/flux/index.js";import"../../icons/stable-diffusion/index.js";import"../../icons/stability-ai/index.js";import"../../icons/article-generator/index.js";import"../../icons/success/index.js";import"../../icons/google/index.js";import"../../icons/yandex/index.js";import"../../icons/vk/index.js";import"../../icons/big-article/index.js";import"../../icons/add-chat/index.js";import"../../icons/add-group/index.js";import"../../icons/drag-dot/index.js";import"../../icons/add-folder/index.js";import"../../icons/temp-chat/index.js";import"../../icons/delete-chat/index.js";import"../../icons/sidebar-chat/index.js";import"../../icons/organization/index.js";import"../../icons/simple-gear/index.js";import"../../icons/text-bold/index.js";import"../../icons/text-italic/index.js";import"../../icons/text-underline/index.js";import"../../icons/text-strikethrough/index.js";import"../../icons/refresh/index.js";import"../../icons/copy-variants/index.js";import"../../icons/sort-ascending/index.js";import"../../icons/sort-descending/index.js";import"../../icons/quote/index.js";import"../../icons/url-circle/index.js";import"../../icons/show-ui/index.js";import"../../icons/hide-ui/index.js";import"../../icons/sort-user/index.js";import"../../icons/happy-robot/index.js";import"../../icons/happy-robot-gradient/index.js";import"../../icons/min-window/index.js";import"../../icons/max-window/index.js";import"../../icons/manage-chat/index.js";import"../../icons/analyze-urls/index.js";import"../../icons/web-search/index.js";import"../../icons/include-context/index.js";import"../../icons/queue/index.js";import"../../icons/sort-alphabet-ascending/index.js";import"../../icons/sort-alphabet-descending/index.js";import"../../icons/sort-date-ascending/index.js";import"../../icons/sort-date-descending/index.js";import"../../icons/cot-r1/index.js";import"../../icons/news/index.js";import"../../icons/volume/index.js";import"../../icons/flag-ru/index.js";import"../../icons/flag-kz/index.js";import"../../icons/print/index.js";import"../../icons/pc-icon-1/index.js";import"../../icons/pc-icon-2/index.js";import"../../icons/pc-icon-3/index.js";import"../../icons/star-unfilled/index.js";import"../../icons/image-generation/index.js";import"../../icons/speech-synthesys/index.js";import"../../icons/transcription/index.js";import"../../icons/text-rewrite/index.js";import"../../icons/code-generation/index.js";import"../../icons/essay-generation/index.js";import"../../icons/spelling/index.js";import"../../icons/text-generation/index.js";import"../../icons/traffic-analisys/index.js";import"../../icons/fav-profile/index.js";import"../../icons/exclamation/index.js";import"../../icons/article/index.js";import"../../icons/setchel/index.js";import"../../icons/assembly/index.js";import"../../icons/data-visualisation/index.js";import"../../icons/document-analisys/index.js";import"../../icons/problem-solvment/index.js";import"../../icons/setting-analisys/index.js";import"../../icons/translation/index.js";import"../../icons/stars/index.js";import"../../icons/academy/index.js";import"../../icons/articles/index.js";import"../../icons/blog-post/index.js";import"../../icons/book/index.js";import"../../icons/bow-tie/index.js";import"../../icons/case-study/index.js";import"../../icons/comments/index.js";import"../../icons/guide/index.js";import"../../icons/marketing/index.js";import"../../icons/post/index.js";import"../../icons/report/index.js";import"../../icons/review/index.js";import"../../icons/scientific-article/index.js";import"../../icons/selling-text/index.js";import"../../icons/textbook/index.js";import"../../icons/wind/index.js";import"../../icons/grok/index.js";import"../../icons/deepseek/index.js";import"../../icons/grid-horizontal/index.js";import"../../icons/grid-vertical/index.js";import"../../icons/star-gradient/index.js";import"../../icons/qwen/index.js";import"../../icons/sidebar-toggle-left/index.js";import"../../icons/sidebar-toggle-right/index.js";import"../../icons/system/index.js";import"../../icons/selector/index.js";import"../../icons/video-camera/index.js";import"../../icons/music-note/index.js";import"../../icons/add-profile/index.js";import"../../icons/token-counter/index.js";import"../../icons/customer-support/index.js";import"../../icons/sort-alphabet-top-bottom/index.js";import"../../icons/sort-alphabet-bottom-top/index.js";import"../../icons/pause/index.js";import"../../icons/play/index.js";import"../../icons/restore-2/index.js";import"../../icons/video-generation/index.js";import"../../icons/veo-model/index.js";import"../../icons/runway/index.js";import"../../icons/queue-select/index.js";import"../../icons/apple/index.js";import"../../icons/mail-colored/index.js";import"../../icons/shield/index.js";import"../../icons/stars-gradient/index.js";import"../../icons/fire/index.js";import"../../icons/brain/index.js";import"../../icons/mj-purple/index.js";import"../../icons/claude-black/index.js";import"../../icons/vk-filled/index.js";import"../../icons/tg/index.js";import"../../icons/gift/index.js";import"../../icons/exchange/index.js";import"../../icons/time/index.js";import"../../icons/folder/index.js";import"../../icons/history/index.js";import"../../icons/money-plus/index.js";import"../../icons/money-stack/index.js";import"../../icons/sort-numeric-bottom/index.js";import"../../icons/sort-numeric-top/index.js";import"../../icons/bulb/index.js";import"../../icons/prompt-queue/index.js";import"../../icons/image/index.js";import"../../icons/text/index.js";import"../../icons/code/index.js";import"../../icons/blue-grok/index.js";import"../../icons/double-image/index.js";import"../../icons/pdf-black/index.js";import"../../icons/csv/index.js";import"../../icons/xls-black/index.js";import"../../icons/word-black/index.js";import"../../icons/brain-black/index.js";import"../../icons/txt-black/index.js";import"../../icons/workspace/index.js";import"../../icons/chat-doc/index.js";import"../../icons/money-spend/index.js";import"../../icons/money-minus/index.js";import"../../icons/max-logo-gradient/index.js";import"../../icons/empty-word/index.js";import"../../icons/music-file/index.js";import"../../icons/sad-file/index.js";import"../../icons/happy-file/index.js";import"../../icons/volume-off/index.js";import"../../icons/github/index.js";import"../../icons/erase/index.js";import"../../icons/arrow-narrow-stars-right/index.js";import"../../icons/literature-list/index.js";import"../../icons/bell-dot/index.js";import"../../icons/bell/index.js";import"../../icons/kwaivgi/index.js";import"../../icons/dollar/index.js";import"../message/versions/styled.js";import"../message/copy/styled.js";import"../message/badge-progress/styled.js";import"../message/button/styled.js";import"../message/button/list/styled.js";import"../message/file/styled.js";import{MessageVoice as M}from"../message/voice/index.js";import"../message/reasoning-block/styled.js";import"../typography/styled.js";import"../message/search-results/styled.js";import"../message/video/styled.js";import"../message/music/styled.js";import{useVoice as N}from"./use-voice.js";import{useFiles as U}from"./use-files.js";import{useInput as G}from"./use-input.js";import{InputMessageFiles as H}from"./input-files.js";import{useTheme as W}from"../../theme/hook.js";const _=_=>{var{className:J,placeholder:Q,editingProps:X,hiddenSend:Y=!1,message:Z,files:ii,imageRequiredText:ei,disabled:si=!1,sendDisabled:oi=!1,textAreaDisabled:ni=!1,messageSubmitKey:ti="enter",concatenateText:ri,uploadFileLimit:di=20,concatenateVideo:ci,hideUploadFile:mi=!1,uploadFileDisabled:ai=!1,uploadFileAccept:pi,autoFocus:li=!0,voice:ji=!1,onChange:xi,handleImageClick:gi,onFilesChange:ui,onVoiceFilesChange:bi,onTextAreaChange:hi,onSend:yi,onFocus:fi,onBlur:ki,emitError:vi,actions:wi,attachAriaLabel:Fi,sendAriaLabel:Ai,saveAriaLabel:Ci,voiceAriaLabel:Li,stopVoiceAriaLabel:Vi,pauseVoiceAriaLabel:Di,resumeVoiceAriaLabel:Si,cancelEditAriaLabel:Ti,deleteVoiceAriaLabel:Ei,deleteFileAriaLabel:qi}=_,Pi=i(_,["className","placeholder","editingProps","hiddenSend","message","files","imageRequiredText","disabled","sendDisabled","textAreaDisabled","messageSubmitKey","concatenateText","uploadFileLimit","concatenateVideo","hideUploadFile","uploadFileDisabled","uploadFileAccept","autoFocus","voice","onChange","handleImageClick","onFilesChange","onVoiceFilesChange","onTextAreaChange","onSend","onFocus","onBlur","emitError","actions","attachAriaLabel","sendAriaLabel","saveAriaLabel","voiceAriaLabel","stopVoiceAriaLabel","pauseVoiceAriaLabel","resumeVoiceAriaLabel","cancelEditAriaLabel","deleteVoiceAriaLabel","deleteFileAriaLabel"]);const Ri=W(),$i=n(null),[zi,Bi]=t(!1),{files:Oi,setFiles:Ii,handleFilePaste:Ki,handleFileInputChange:Mi,handleSideUploadFiles:Ni,handleDeleteFile:Ui}=U({uploadFileAccept:pi,uploadFileLimit:di,uploadFileDisabled:ai,initialFiles:ii,emitError:vi,onFilesChange:ui}),{voiceFiles:Gi,isVoiceRecording:Hi,isVoicePaused:Wi,voiceRecordingTime:_i,setVoiceFiles:Ji,handleVoiceRecordStart:Qi,handleVoiceRecordEnd:Xi,handleVoiceResume:Yi,handleVoicePause:Zi,handleVoiceFileDelete:ie}=N({onVoiceFilesChange:bi}),{textareaRef:ee,isFocus:se,height:oe,message:ne,setHeight:te,setMessage:re,handleFocus:de,handleBlur:ce,handleClick:me,handleChange:ae}=G({initialMessage:Z,sendDisabled:oi,disabled:si,autoFocus:li,messageSubmitKey:ti,onChange:xi,onSendMessage:()=>{null==yi||yi(ne,Oi),null==Ii||Ii([]),null==Ji||Ji([])},onTextAreaChange:hi,onFocus:fi,onBlur:ki}),pe=r(i=>{i.stopPropagation(),null==yi||yi(ne,Oi),null==re||re(""),null==Ii||Ii([]),null==Ji||Ji([]),te("calc(var(--bothub-scale, 1) * 22px)")},[ne,Oi,yi,re,Ii,Ji]),le=r(i=>{var e;i.stopPropagation(),null===(e=$i.current)||void 0===e||e.click()},[$i]),je=null==Oi?void 0:Oi.filter(i=>i.native.type.startsWith("video/"));return s(d,{$active:se,$dragActive:zi,$disabled:si,$textAreaDisabled:ni,$voiceRecording:Hi,className:J,onClick:me,onDragEnter:()=>Bi(!0),onDragLeave:()=>Bi(!1),onDragOver:i=>(i.stopPropagation(),i.preventDefault(),!1),onDrop:i=>e(void 0,void 0,void 0,function*(){if(i.dataTransfer.files.length>0)return i.stopPropagation(),i.preventDefault(),yield Ni([...i.dataTransfer.files]),Bi(!1),!1}),children:o(c,{children:[o(m,{children:[!mi&&o(a,{children:[s(p,{$disabled:Oi.length>=di||si||ai,"aria-label":Fi,onClick:le,children:s(K,{size:18,fill:Ri.colors.base.white})}),s(l,{ref:$i,type:"file",accept:pi,multiple:!0,disabled:Oi.length>=di||si||ai,onChange:Mi},Oi.length)]}),wi]}),o(j,{onClick:me,children:[(null==X?void 0:X.isEditing)&&o(x,{children:[s(O,{size:24,children:s(B,{})}),o(g,{children:[o(u,{children:[s(b,{children:X.editingTitle}),o(h,{children:[s(y,{children:X.editFiles}),s(f,{children:X.editString})]})]}),s(k,{"aria-label":Ti,onClick:X.resetEdit,children:s(O,{size:18,children:s(I,{})})})]})]}),Hi&&null!==_i&&o(v,{children:[s(w,{}),s(F,{children:$(_i)})]}),s(H,{files:Oi,handleImageClick:gi,handleDeleteFile:Ui,deleteFileAriaLabel:qi}),ei&&s(A,{children:ei}),Gi.length>1&&s(A,{children:ri}),je.length>1&&s(A,{children:ci}),Gi.length>0&&s(C,{children:Gi.map(i=>o(L,{children:[s(M,{variant:"input",height:18,src:i.src,duration:i.duration,waveData:i.waveData,disableTranscription:!0}),s(V,{"aria-label":Ei,onClick:ie.bind(null,i)})]},i.src))}),(!ni||ni&&Q&&Oi.length!==di||ni&&ne)&&s(D,Object.assign({$disabled:si},Pi,{ref:ee,value:ne,placeholder:Q,disabled:si||ni,style:Object.assign(Object.assign({},Pi.style),{height:oe}),onFocus:de,onBlur:ce,onChange:ae,onPaste:Ki}))]}),o(S,{children:[Hi&&(Wi?s(T,{"aria-label":Si,onClick:Yi}):s(E,{"aria-label":Di,onClick:Zi})),ji&&s(q,{$isRecording:Hi,disabled:si||oi,"aria-label":Hi?Vi:Li,"aria-pressed":Hi,onClick:Hi?Xi:Qi,"data-test":"submit-message"}),!Y&&!Hi&&s(P,Object.assign({disabled:si||oi||Hi,"aria-label":(null==X?void 0:X.isEditing)&&null!=Ci?Ci:Ai,onClick:pe},Ri.bright&&{iconFill:Ri.default.colors.base.black},{"data-test":"submit-message",children:(null==X?void 0:X.isEditing)?s(z,{}):s(R,{})}))]})]})})};export{_ as InputMessage,H as InputMessageFiles};