UNPKG

@bothub-chat/ui

Version:

Bothub UI Components

bothub.chat

bothubchat/bothub

2 lines (1 loc) • 19.9 kB
1
2
import{jsxs as i,jsx as o,Fragment as n}from"react/jsx-runtime";import{useState as s,useRef as e,useMemo as t,useCallback as r,useLayoutEffect as c,useEffect as d}from"react";import{useTransition as p,easings as m}from"@react-spring/web";import{MenuDotIcon as x}from"../../../icons/menu-dot/index.js";import{UpdateIcon as a}from"../../../icons/update/index.js";import{ResendIcon as j}from"../../../icons/resend/index.js";import{EditIcon as l}from"../../../icons/edit/index.js";import{TrashIcon as u}from"../../../icons/trash/index.js";import{ThumbDownIcon as g}from"../../../icons/thumb-down/index.js";import{CopyIcon as b}from"../../../icons/copy/index.js";import{DownloadImgIcon as h}from"../../../icons/download-img/index.js";import{MessageActionsStyled as f,MessageActionsMenuStyled as w,MessageActionsMenuModal as y,MessageActionsMenuModalOptionContent as k,MessageActionsButtonText as v}from"./styled.js";import{MenuOption as C}from"./menu-option/index.js";import{CopyButton as L}from"./copy-button/index.js";import{ActionButton as T}from"./action-button/index.js";import"../list/styled.js";import{useScrollbarRef as z}from"../list/context.js";import"../scroll-button/styled.js";import"tslib";import{IconProvider as E}from"../../icon/context.js";import"../../icon/styled.js";import"react-markdown";import"react-dom";import"../../portal/styled.js";import"../../tooltip/styled.js";import"../../tooltip/arrow/styled.js";import"../../../theme/index.js";import"../../tooltip/context.js";import"unified";import"remark-parse";import"remark-gfm";import"mdast-util-to-markdown";import{colorToRgba as q}from"../../../utils/colors/colorToRgba.js";import"../../../utils/colors/calculateGrayScale.js";import"../../../utils/colors/calculateAccentColors.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"../../../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/check-small/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"../../../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{ShieldIcon as R}from"../../../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{MoneyPlusIcon as M}from"../../../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{useTheme as D}from"../../../theme/hook.js";const S=({id:S,disableModal:$,message:B,variant:O="user",skeleton:A,disableResend:P,disableEdit:U,disableDelete:G,disableUpdate:H,disableCopy:W,disableDownload:X,disableEncryption:Y,hasCacheTokens:_,editOutOfMenu:F,editText:I,copyTgText:J,copyPlainText:K,resendText:N,deleteText:Q,onReportText:V,downloadTooltipLabel:Z,encryptionTooltipLabel:ii,cacheTokenTooltipLabel:oi,updateTooltipLabel:ni,copyTooltipLabel:si,onEdit:ei,onResend:ti,onDelete:ri,onUpdate:ci,onReport:di,onPlainTextCopy:pi,onTgCopy:mi,onCopy:xi,onDownload:ai,menuAriaLabel:ji})=>{const li=D(),[ui,gi]=s(!1),[bi,hi]=s(!1),[fi,wi]=s(!1),yi=e(null),ki=e(null),vi=e(null),Ci=e(null),Li=z(),Ti=t(()=>"custom"===li.scheme?q(li.colors.custom.icon,.75):"standard"===li.scheme||"light"===li.mode?li.colors.grayScale.gray1:li.colors.accent.primary,[li]),zi=t(()=>{if(A)return!1;switch(O){case"assistant":return!$;case"user":return!$&&(!U||!G||!P)}},[A,O,$,U,G,P]),Ei=t(()=>{let i=0;return!W&&K&&pi&&(i+=1),!W&&J&&mi&&(i+=1),!P&&"user"===O&&N&&ti&&(i+=1),!F&&!U&&I&&ei&&(i+=1),!G&&Q&&ri&&(i+=1),!G&&V&&di&&"user"!==O&&(i+=1),i},[K,J,Q,W,G,U,P,F,I,ri,ei,pi,di,V,ti,mi,N,O]),qi=r(()=>{var i,o,n,s;const e=null===(i=null==Li?void 0:Li.current)||void 0===i?void 0:i.element,t=null!==(o=vi.current)&&void 0!==o?o:ki.current,r=null==Ci?void 0:Ci.current;if(!e||!t)return;const c=e.getBoundingClientRect(),d=t.getBoundingClientRect(),p=null!==(n=null==r?void 0:r.offsetHeight)&&void 0!==n?n:48*Ei+16,m=null!==(s=null==r?void 0:r.offsetWidth)&&void 0!==s?s:160,x=c.bottom-d.bottom,a=d.top-c.top,j=x<p+36+8&&a>8,l=d.left-c.left,u=c.right-d.right;let g=!1;g="assistant"===O?l<m+8:u<m+8,wi(j),hi(g)},[Ei,Li,O]);c(()=>{ui&&qi()},[ui,qi]);const Ri=r(()=>{yi.current&&(window.clearTimeout(yi.current),yi.current=null),qi(),gi(!0)},[qi]),Mi=r(()=>{Ri()},[Ri]),Di=r(()=>{yi.current=window.setTimeout(()=>{gi(!1),yi.current=null},300)},[]),Si=r(()=>{ui?gi(!1):Ri()},[Ri,ui]),$i=r(i=>{const o={id:S,message:B};switch(i){case"edit":null==ei||ei({id:S,message:B,variant:O});break;case"delete":null==ri||ri(o);break;case"update":null==ci||ci({id:S});break;case"resend":null==ti||ti(o)}gi(!1)},[S,B,ri,ti,ei,ci]),Bi=r(()=>{null==mi||mi(),gi(!1)},[mi]),Oi=r(()=>{null==pi||pi(),gi(!1)},[pi]),Ai=r(()=>{null==di||di({id:S,message:B}),gi(!1)},[S,B,di]),Pi=p(ui,{from:{opacity:0,y:5},enter:{opacity:1,y:0},leave:{opacity:0,y:0},config:{duration:250,easing:m.easeOutSine}});return d(()=>{if(!ui)return;const i=()=>{gi(!1)};return window.addEventListener("scroll",i,!0),()=>{window.removeEventListener("scroll",i,!0)}},[ui]),d(()=>{if(!ui)return;const i=()=>{qi()};return window.addEventListener("resize",i),()=>{window.removeEventListener("resize",i)}},[ui,qi]),d(()=>()=>{yi.current&&window.clearTimeout(yi.current)},[]),i(f,{$variant:O,ref:ki,children:[o(n,{children:i(E,{fill:Ti,children:[zi&&i(w,{ref:vi,onBlur:()=>{gi(!1)},children:[o(T,{tooltipLabel:ji,"aria-expanded":ui,"aria-haspopup":"menu",onMouseEnter:"ontouchstart"in window?void 0:Mi,onMouseLeave:"ontouchstart"in window?void 0:Di,onClick:Si,children:o(x,{size:18})}),Pi((n,s)=>s&&i(y,{style:n,ref:Ci,onMouseEnter:Ri,onMouseLeave:Di,$variant:O,$invertedX:bi,$invertedY:fi,children:[!W&&K&&pi&&o(C,{onClick:Oi,children:i(k,{children:[o(b,{}),o(v,{children:K})]})}),!W&&J&&mi&&o(C,{onClick:Bi,children:i(k,{children:[o(b,{}),o(v,{children:J})]})}),!P&&"user"===O&&N&&ti&&o(C,{onClick:()=>{$i("resend")},children:i(k,{children:[o(j,{}),o(v,{children:N})]})}),!F&&!U&&I&&ei&&o(C,{onClick:()=>{$i("edit")},children:i(k,{children:[o(l,{}),o(v,{children:I})]})}),!G&&Q&&ri&&o(C,{onClick:()=>{$i("delete")},children:i(k,{children:[o(u,{}),o(v,{children:Q})]})}),!G&&V&&di&&"user"!==O&&o(C,{onClick:Ai,children:i(k,{children:[o(g,{size:18}),o(v,{children:V})]})})]},"message-actions-modal"))]}),!zi&&!G&&o(T,{id:S,message:B,onClick:ri,tooltipLabel:Q,children:o(u,{size:20})}),!H&&"user"!==O&&o(T,{id:S,message:B,onClick:ci,tooltipLabel:ni,children:o(a,{size:18})}),F&&o(T,{id:S,message:B,onClick:()=>{$i("edit")},tooltipLabel:I,children:o(l,{size:18})}),!W&&o(L,{onCopy:xi,tooltipLabel:si}),!zi&&!G&&V&&di&&"user"!==O&&o(T,{tooltipLabel:V,onClick:Ai,children:o(g,{size:18})})]})}),!X&&o(T,{tooltipLabel:Z,onClick:ai,children:o(h,{size:18})}),!Y&&o(T,{tooltipLabel:ii,children:o(R,{size:18})}),_&&o(T,{tooltipLabel:oi,children:o(E,{size:18,stroke:li.colors.grayScale.gray1,children:o(M,{})})})]})};export{S as MessageActions};