UNPKG

@bothub-chat/ui

Version:

Bothub UI Components

2 lines (1 loc) • 8.25 kB
import{jsx as e}from"react/jsx-runtime";import{styled as t,css as a}from"styled-components";import{Avatar as s}from"../avatar/index.js";import{Typography as i}from"../typography/index.js";import{Button as o}from"../button/index.js";import{ArrowNarrowDownIcon as n}from"../../icons/arrow-narrow-down/index.js";import{ArrowNarrowLeftIcon as r}from"../../icons/arrow-narrow-left/index.js";import{ArrowNarrowRightIcon as d}from"../../icons/arrow-narrow-right/index.js";import{ArrowNarrowUpIcon as l}from"../../icons/arrow-narrow-up/index.js";import{EditIcon as p}from"../../icons/edit/index.js";import{adaptive as m}from"../../adaptive/index.js";import{Badge as c}from"../badge/index.js";import{Scrollbar as g}from"../scrollbar/index.js";import{MessageImageButton as w}from"./components/image/button/index.js";import{MessageImageButtonZoneWrapper as f}from"./components/image/button/styled.js";const x=t.div.withConfig({displayName:"styled__MessageStyledWrapper",componentId:"sc-1wz70sd-0"})(["display:flex;align-items:flex-start;width:100%;",""],(({$variant:e})=>{switch(e){case"user":return a(["justify-content:flex-start;flex-direction:row-reverse;margin-left:auto;"]);case"assistant":return a(["margin-right:auto;"])}})),y=t.div.withConfig({displayName:"styled__MessageStyledWithBottomPanel",componentId:"sc-1wz70sd-1"})(["display:flex;width:fit-content;max-width:100%;flex-direction:column;gap:8px;"]),h=t.div.withConfig({displayName:"styled__MessageStyled",componentId:"sc-1wz70sd-2"})(["display:flex;max-width:100%;"," "," ",""],(({$variant:e})=>{if("user"===e)return a(["flex-direction:row-reverse;"])}),(()=>a(["","{visibility:hidden;}&:hover{","{visibility:visible;}}"],E,E)),m((()=>({variant:"dashboard",touch:a(["","{visibility:visible !important;}"],E)})))),u=t.div.withConfig({displayName:"styled__MessageContent",componentId:"sc-1wz70sd-3"})(["position:relative;display:grid;column-gap:12px;max-width:100%;",""],(({$variant:e})=>{switch(e){case"user":return a(["grid-template-areas:'. top .' 'actions block avatar' '. buttons .';"]);case"assistant":return a(["grid-template-areas:'. top .' 'avatar block actions' '. buttons .';"])}})),v=t.div.withConfig({displayName:"styled__MessageTop",componentId:"sc-1wz70sd-4"})(["display:flex;gap:10px;width:100%;align-items:center;justify-content:space-between;grid-area:top;margin-bottom:8px;"]),_=t.div.withConfig({displayName:"styled__MessageBottom",componentId:"sc-1wz70sd-5"})(["margin-top:4px;grid-area:buttons;"]),b=t.div.withConfig({displayName:"styled__MessageSender",componentId:"sc-1wz70sd-6"})(["display:flex;align-items:center;gap:10px;"]),z=t(i).attrs({variant:"body-m-regular"}).withConfig({displayName:"styled__MessageName",componentId:"sc-1wz70sd-7"})(["color:",";"],(({theme:e,$color:t})=>{switch(t){case"green":return"dark"===e.mode?e.default.colors.base.white:e.colors.gpt3;case"purple":return"dark"===e.mode?e.default.colors.base.white:e.colors.gpt4;default:return e.colors.base.white}})),C=t.div.withConfig({displayName:"styled__MessageTags",componentId:"sc-1wz70sd-8"})([""]),I=t(c).withConfig({displayName:"styled__MessageTag",componentId:"sc-1wz70sd-9"})([""]),N=t.div.withConfig({displayName:"styled__MessageAvatarWrapper",componentId:"sc-1wz70sd-10"})(["grid-area:avatar;align-self:flex-end;user-select:none;",""],(({$variant:e})=>"user"===e&&m({variant:"dashboard",mobile:a(["display:none;"])}))),M=t(s).withConfig({displayName:"styled__MessageAvatar",componentId:"sc-1wz70sd-11"})([""]),j=t.div.withConfig({displayName:"styled__MessageBlockWrapper",componentId:"sc-1wz70sd-12"})(["display:flex;flex-direction:column;justify-content:center;grid-area:block;gap:6px;position:relative;overflow:auto;"]),k=t.div.withConfig({displayName:"styled__MessageBlock",componentId:"sc-1wz70sd-13"})(["position:relative;display:flex;border-radius:10px;width:100%;max-width:100%;overflow:auto;"," "," "," ",""],(({$variant:e})=>{switch(e){case"user":return a(["border-bottom-right-radius:0px;"]);case"assistant":return a(["border-bottom-left-radius:0px;"])}}),(({$hexColor:e,$variant:t})=>"user"===t&&`background: ${e};`),(({$hasTimestamp:e,$timestampPosition:t,$variant:s})=>e?"user"===s&&m({variant:"dashboard",merge:!0,desktop:a(["padding:",";"],"right"===t?"8px":"8px 8px 5px 8px"),tablet:a(["padding:",";"],"right"===t?"8px":"8px 8px 5px 8px")}):"user"===s&&m({variant:"dashboard",merge:!0,desktop:a(["padding:14px 16px;"]),tablet:a(["padding:14px;"])})),(({$timestampPosition:e})=>"bottom"===e&&a(["flex-direction:column;"]))),B=t.div.withConfig({displayName:"styled__MessageBlockBottomPanel",componentId:"sc-1wz70sd-14"})(["display:flex;align-items:center;gap:10px;",""],(({$variant:e})=>{switch(e){case"user":return a(["margin-top:4px;margin-left:0px;"]);case"assistant":return a(["margin-left:52px;@media (max-width:","){margin-left:0;}"],(({theme:e})=>e.mobile.maxWidth));default:return a([""])}})),$=t.div.withConfig({displayName:"styled__MessageBlockTransaction",componentId:"sc-1wz70sd-15"})(["display:block;"]),A=t(g).attrs({variant:"secondary"}).withConfig({displayName:"styled__MessageBlockScrollbarWrapper",componentId:"sc-1wz70sd-16"})([""]),S=t.div.withConfig({displayName:"styled__MessageBlockContent",componentId:"sc-1wz70sd-17"})(["display:flex;flex-direction:column;align-items:flex-start;gap:10px;grid-area:block;border-radius:10px;padding:",";max-width:100%;overflow:auto;"],(({$variant:e})=>{switch(e){case"user":return"8px";case"assistant":return"0px 8px 0px 0px"}})),T=t.span.attrs({role:"textbox",contentEditable:!0,suppressContentEditableWarning:!0}).withConfig({displayName:"styled__MessageBlockTextArea",componentId:"sc-1wz70sd-18"})(["min-width:10ch;min-height:1ch;min-height:1cap;width:100%;max-width:100%;height:auto;resize:none;overflow:clip;white-space:pre-wrap;border:none;outline:none;background-color:transparent;",""],m({desktop:a(["font-size:16px;"]),tablet:a(["font-size:14px;"]),mobile:a(["font-size:14px;"])})),W=t.div.withConfig({displayName:"styled__MessageButtonsStyled",componentId:"sc-1wz70sd-19"})(["margin-left:48px;@media (max-width:","){margin-left:12px;}"],(({theme:e})=>e.mobile.maxWidth)),P=t(i).attrs({variant:"body-m-regular"}).withConfig({displayName:"styled__MessageTransaction",componentId:"sc-1wz70sd-20"})(["text-transform:uppercase;color:",";"],(({theme:e})=>"light"===e.mode?e.colors.grayScale.gray1:e.default.colors.base.white)),E=t.div.withConfig({displayName:"styled__MessageActions",componentId:"sc-1wz70sd-21"})(["display:flex;grid-area:actions;gap:10px;align-self:flex-end;"]),L=t(o).attrs({variant:"text",iconSize:18}).withConfig({displayName:"styled__MessageAction",componentId:"sc-1wz70sd-22"})([""]),R=t(L).attrs({children:e(p,{})}).withConfig({displayName:"styled__MessageEditAction",componentId:"sc-1wz70sd-23"})([""]),q=t(w).attrs({variant:"primary-transparent",zone:!0,children:e(r,{})}).withConfig({displayName:"styled__MessageImageLeftArrowButton",componentId:"sc-1wz70sd-24"})(["","{justify-content:flex-start;}"],f),D=t(w).attrs({variant:"primary-transparent",zone:!0,children:e(d,{})}).withConfig({displayName:"styled__MessageImageRightArrowButton",componentId:"sc-1wz70sd-25"})(["","{justify-content:flex-end;}"],f),F=t(w).attrs({variant:"primary-transparent",zone:!0,children:e(l,{})}).withConfig({displayName:"styled__MessageImageTopArrowButton",componentId:"sc-1wz70sd-26"})(["","{align-items:flex-start;}"],f),G=t(w).attrs({variant:"primary-transparent",zone:!0,children:e(n,{})}).withConfig({displayName:"styled__MessageImageBottomArrowButton",componentId:"sc-1wz70sd-27"})(["","{align-items:flex-end;}"],f);export{L as MessageAction,E as MessageActions,M as MessageAvatar,N as MessageAvatarWrapper,k as MessageBlock,B as MessageBlockBottomPanel,S as MessageBlockContent,A as MessageBlockScrollbarWrapper,T as MessageBlockTextArea,$ as MessageBlockTransaction,j as MessageBlockWrapper,_ as MessageBottom,W as MessageButtonsStyled,u as MessageContent,R as MessageEditAction,G as MessageImageBottomArrowButton,q as MessageImageLeftArrowButton,D as MessageImageRightArrowButton,F as MessageImageTopArrowButton,z as MessageName,b as MessageSender,h as MessageStyled,y as MessageStyledWithBottomPanel,x as MessageStyledWrapper,I as MessageTag,C as MessageTags,v as MessageTop,P as MessageTransaction};