UNPKG

@bothub-chat/ui

Version:

Bothub UI Components

bothub.chat

bothubchat/bothub

78 lines (77 loc) • 19.8 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
import{jsx as i}from"react/jsx-runtime";import{styled as o,css as s,keyframes as n}from"styled-components";import{Typography as e}from"../../typography/index.js";import{Button as t}from"../../button/index.js";import{TrashIcon as r}from"../../../icons/trash/index.js";import{Skeleton as d}from"../../skeleton/index.js";import{adaptive as c}from"../../../adaptive/index.js";import{MenuDotIcon as p}from"../../../icons/menu-dot/index.js";import{SidebarChatIcon as m}from"../../../icons/sidebar-chat/index.js";import{DragDotIcon as a}from"../../../icons/drag-dot/index.js";import{Checkbox as x}from"../../checkbox/index.js";import{Tooltip as j}from"../../tooltip/index.js";import{colorToRgba as l}from"../../../utils/colors/colorToRgba.js";import"../../../utils/colors/calculateGrayScale.js";import"../../../utils/colors/calculateAccentColors.js";import{Progress as h}from"../../progress/index.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"tslib";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/copy/index.js";import"../../../icons/edit/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/update/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{CheckSmallIcon as g}from"../../../icons/check-small/index.js";import"../../../icons/stop/index.js";import"../../../icons/thumb-up/index.js";import"../../../icons/thumb-down/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/download-img/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/resend/index.js";import"../../../icons/big-article/index.js";import"../../../icons/add-chat/index.js";import"../../../icons/add-group/index.js";import"../../../icons/add-folder/index.js";import"../../../icons/temp-chat/index.js";import"../../../icons/delete-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{getTypographyStyles as b}from"../../typography/styled.js";const u=o.div.withConfig({displayName:"styled__SidebarChatLeft",componentId:"sc-joo7xh-0"})(["cursor:pointer;display:block;margin-right:8px;width:100%;overflow:hidden;"]),y=o.div.withConfig({displayName:"styled__SidebarChatRight",componentId:"sc-joo7xh-1"})(["display:flex;"]),f=o(m).withConfig({displayName:"styled__SidebarChatIconStyled",componentId:"sc-joo7xh-2"})([""," display:none;"],(({theme:i})=>s` path { stroke: ${"custom"===i.scheme?i.colors.custom.icon:i.colors.grayScale.gray1}; } `)),w=o.span.withConfig({displayName:"styled__SidebarChatIconContainer",componentId:"sc-joo7xh-3"})(["display:inline-flex;width:18px;height:18px;margin-right:10px;flex-shrink:0;","{display:",";","}"],f,(({$isDefault:i})=>i?"inline-flex":"none"),(({$active:i,theme:o})=>i&&s` fill: ${o.colors.base.white}; stroke: ${o.colors.base.white}; `)),v=o.div.withConfig({displayName:"styled__SidebarChatProgressValue",componentId:"sc-joo7xh-4"})(["color:white;margin-top:2px;margin-right:8px;",""],b("body-s-medium")),C=o.div.attrs({children:i(g,{})}).withConfig({displayName:"styled__SidebarChatProgressIcon",componentId:"sc-joo7xh-5"})(["display:flex;justify-content:center;align-items:center;padding-top:1px;width:18px;height:18px;border-radius:50%;background-color:",";"],(({theme:i})=>i.colors.accent.primary)),k=o.div.withConfig({displayName:"styled__SidebarChatNameBox",componentId:"sc-joo7xh-6"})([""]),_=o(e).attrs({variant:"body-m-medium",component:"div"}).withConfig({displayName:"styled__SidebarChatName",componentId:"sc-joo7xh-7"})(["overflow:hidden;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity 0.3s;",""],c({tablet:s` max-width: 130px; `,mobile:s` max-width: 130px; `})),S=o(d).withConfig({displayName:"styled__SidebarChatNameSkeleton",componentId:"sc-joo7xh-8"})(["",""],c({desktop:s` width: 160px; `,tablet:s` width: 130px; `,mobile:s` width: 130px; `})),$=o.div.withConfig({displayName:"styled__SidebarChatActions",componentId:"sc-joo7xh-9"})(["display:flex;gap:6px;margin-left:8px;"]),N=o(t).attrs({variant:"text",children:i(p,{})}).withConfig({displayName:"styled__SidebarChatEditAction",componentId:"sc-joo7xh-10"})(["transform:rotate(90deg);"]),I=o(t).attrs({variant:"text",children:i(r,{})}).withConfig({displayName:"styled__SidebarChatDeleteAction",componentId:"sc-joo7xh-11"})([""]),q=o.div.withConfig({displayName:"styled__SidebarChatClosed",componentId:"sc-joo7xh-12"})([""]),z=o(e).attrs({variant:"body-s-medium",component:"span"}).withConfig({displayName:"styled__SidebarChatCaps",componentId:"sc-joo7xh-13"})(["display:inline-flex;padding:4px 8px;background:",";border-radius:10px;cursor:default;transition:opacity 0.3s;"],(({theme:i})=>i.colors.grayScale.gray2)),D=n(["from{opacity:0;left:0px;}to{opacity:1;left:-3px;}"]),A=o.div.withConfig({displayName:"styled__SidebarChatWithOutlineStyled",componentId:"sc-joo7xh-14"})(["margin-left:3px;height:100%;position:relative;",";"],(({$active:i,theme:o})=>i&&s` border-radius: 10px; &:before { content: ''; width: 20px; height: 100%; border-radius: 10px; position: absolute; top: 0; left: 0px; background-color: ${o.colors.accent.primary}; z-index: 0; animation: ${D} 0.3s ease-in-out 1 forwards; } `)),P=o.div.withConfig({displayName:"styled__SidebarChatWithBackgroundStyled",componentId:"sc-joo7xh-15"})(["height:100%;border-radius:10px;position:relative;",""],(({$active:i,theme:o})=>i&&s` background-color: ${o.colors.grayScale.gray4}; `)),L=o.div.withConfig({displayName:"styled__SidebarChatStyled",componentId:"sc-joo7xh-16"})(["display:flex;flex-direction:column;gap:8px;width:100%;padding:8px;cursor:pointer;-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;position:relative;",";",";"," ",""],(({$progressDone:i,theme:o})=>i&&s` &::before { content: ''; display: block; background: ${o.colors.gradient.deluxe}; border-radius: 10px; opacity: 0.2; position: absolute; inset: 0; } `),(({$draggble:i,theme:o})=>{if(i)return s` background: ${o.colors.grayScale.gray3}; border-radius: 10px; opacity: 0.7; `}),(({$active:i,$skeleton:o,$progressDone:n,theme:e})=>i?s` border-radius: 10px; background-color: ${l(e.colors.accent.primaryLight,.5)}; transition: background-color 0.3s ease-out; ${f} { path { stroke: ${e.colors.base.white}; } border-radius: 10px; } `:i||o||n?void 0:s` &:hover { border-radius: 10px; background-color: ${l(e.colors.accent.primaryLight,.5)}; transition: background-color 0.3s ease-out; } `),(({$skeleton:i,$active:o,$isProgress:n})=>i||o||n?s``:s` ${w}, ${_}, ${z} { opacity: 0.4; } &:hover { ${w}, ${_}, ${z} { opacity: 1; } } `)),T=o.div.withConfig({displayName:"styled__SidebarChatContent",componentId:"sc-joo7xh-17"})(["display:flex;justify-content:space-between;align-items:center;"]),W=o(x).withConfig({displayName:"styled__SidebarChatCheckbox",componentId:"sc-joo7xh-18"})(["margin-left:20px;"]),B=o(j).withConfig({displayName:"styled__SidebarChatTooltip",componentId:"sc-joo7xh-19"})(["overflow:hidden;"]),R=o(a).withConfig({displayName:"styled__SidebarChatDragHandle",componentId:"sc-joo7xh-20"})(["outline:none;touch-action:none;margin-right:10px;cursor:grab;"]),E=o(j).withConfig({displayName:"styled__SidebarChatNameTooltip",componentId:"sc-joo7xh-21"})([""]),G=o(h).attrs({fullWidth:!0}).withConfig({displayName:"styled__SidebarChatProgress",componentId:"sc-joo7xh-22"})(["& > div{height:3px;}& > div > div{background:",";}"],(({theme:i})=>i.colors.gradient.deluxe));export{$ as SidebarChatActions,z as SidebarChatCaps,W as SidebarChatCheckbox,q as SidebarChatClosed,T as SidebarChatContent,I as SidebarChatDeleteAction,R as SidebarChatDragHandle,N as SidebarChatEditAction,w as SidebarChatIconContainer,f as SidebarChatIconStyled,u as SidebarChatLeft,_ as SidebarChatName,k as SidebarChatNameBox,S as SidebarChatNameSkeleton,E as SidebarChatNameTooltip,G as SidebarChatProgress,C as SidebarChatProgressIcon,v as SidebarChatProgressValue,y as SidebarChatRight,L as SidebarChatStyled,B as SidebarChatTooltip,P as SidebarChatWithBackgroundStyled,A as SidebarChatWithOutlineStyled};