@lobehub/ui/es/chat/ChatItem/style.mjs.map

Lobe UI is an open-source UI component library for building AIGC web apps

{"version":3,"file":"style.mjs","names":["cssVar"],"sources":["../../../src/chat/ChatItem/style.ts"],"sourcesContent":["import { createStaticStyles, responsive } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  const blockStylish = css`\n    padding-block: 8px;\n    padding-inline: 12px;\n    border: 1px solid color-mix(in srgb, ${cssVar.colorBorderSecondary} 66%, transparent);\n    border-radius: ${cssVar.borderRadiusLG};\n\n    background-color: ${cssVar.colorBgContainer};\n  `;\n\n  const rawStylishWithTitle = css`\n    padding-block-start: 0;\n  `;\n\n  const rawStylishWithoutTitle = css`\n    padding-block-start: 6px;\n  `;\n\n  const rawContainerStylish = css`\n    margin-block-end: -16px;\n    transition: background-color 100ms ${cssVar.motionEaseOut};\n  `;\n\n  const editingStylish = css`\n    width: 100%;\n  `;\n\n  return {\n    // Actions styles - placement + variant + editing combinations\n    actionsBubbleLeft: css`\n      flex: none;\n      align-self: flex-end;\n      justify-content: flex-end;\n    `,\n    actionsBubbleRight: css`\n      flex: none;\n      align-self: flex-end;\n      justify-content: flex-start;\n    `,\n    actionsDocsLeft: css`\n      flex: none;\n      align-self: flex-start;\n      justify-content: flex-end;\n    `,\n    actionsDocsRight: css`\n      flex: none;\n      align-self: flex-end;\n      justify-content: flex-start;\n    `,\n    actionsEditing: css`\n      pointer-events: none !important;\n      opacity: 0 !important;\n    `,\n\n    avatarContainer: css`\n      position: relative;\n      flex: none;\n      width: var(--chat-item-avatar-size, 40px);\n      height: var(--chat-item-avatar-size, 40px);\n    `,\n    avatarGroupContainer: css`\n      width: var(--chat-item-avatar-size, 40px);\n    `,\n    container: css`\n      position: relative;\n\n      width: 100%;\n      max-width: 100vw;\n      padding-block: 24px 12px;\n      padding-inline: 12px;\n\n      time {\n        display: inline-block;\n        white-space: nowrap;\n      }\n\n      div[role='menubar'] {\n        display: flex;\n      }\n\n      time,\n      div[role='menubar'] {\n        pointer-events: none;\n        opacity: 0;\n        transition: opacity 200ms ${cssVar.motionEaseOut};\n      }\n\n      &:hover {\n        time,\n        div[role='menubar'] {\n          pointer-events: unset;\n          opacity: 1;\n        }\n      }\n\n      div[role='menubar']:has([data-popup-open]),\n      div[role='menubar'][data-popup-open] {\n        pointer-events: unset !important;\n        opacity: 1 !important;\n\n        [data-popup-open] {\n          background: ${cssVar.colorFillTertiary};\n        }\n      }\n\n      ${responsive.sm} {\n        padding-block-start: 12px;\n        padding-inline: 8px;\n      }\n    `,\n\n    containerDocs: css`\n      ${rawContainerStylish}\n      position: relative;\n\n      width: 100%;\n      max-width: 100vw;\n      padding-block: 24px 12px;\n      padding-inline: 12px;\n\n      time {\n        display: inline-block;\n        white-space: nowrap;\n      }\n\n      div[role='menubar'] {\n        display: flex;\n      }\n\n      time,\n      div[role='menubar'] {\n        pointer-events: none;\n        opacity: 0;\n        transition: opacity 200ms ${cssVar.motionEaseOut};\n      }\n\n      &:hover {\n        time,\n        div[role='menubar'] {\n          pointer-events: unset;\n          opacity: 1;\n        }\n      }\n\n      div[role='menubar']:has(.lobe-dropdown-menu-trigger[data-popup-open]) {\n        pointer-events: unset;\n        opacity: 1;\n      }\n\n      ${responsive.sm} {\n        padding-block-start: 16px;\n        padding-inline: 8px;\n      }\n    `,\n    editingContainer: css`\n      ${editingStylish}\n      padding-block: 8px 12px;\n      padding-inline: 12px;\n      border: 1px solid ${cssVar.colorBorderSecondary};\n\n      &:active,\n      &:hover {\n        border-color: ${cssVar.colorBorder};\n      }\n    `,\n\n    editingContainerDocs: css`\n      ${editingStylish}\n      padding-block: 8px 12px;\n      padding-inline: 12px;\n      border: 1px solid ${cssVar.colorBorderSecondary};\n      border-radius: ${cssVar.borderRadius};\n\n      background: ${cssVar.colorFillQuaternary};\n\n      &:active,\n      &:hover {\n        border-color: ${cssVar.colorBorder};\n      }\n    `,\n\n    editingInput: css`\n      width: 100%;\n    `,\n\n    errorContainer: css`\n      position: relative;\n      overflow: hidden;\n      width: 100%;\n    `,\n\n    loadingLeft: css`\n      position: absolute;\n      inset-block-end: 0;\n      inset-inline-start: -4px;\n\n      width: 16px;\n      height: 16px;\n      border-radius: 50%;\n\n      color: ${cssVar.colorBgLayout};\n\n      background: ${cssVar.colorPrimary};\n    `,\n\n    loadingRight: css`\n      position: absolute;\n      inset-block-end: 0;\n      inset-inline-end: -4px;\n\n      width: 16px;\n      height: 16px;\n      border-radius: 50%;\n\n      color: ${cssVar.colorBgLayout};\n\n      background: ${cssVar.colorPrimary};\n    `,\n\n    messageBubble: css`\n      ${blockStylish}\n      position: relative;\n      overflow: hidden;\n      max-width: 100%;\n\n      ${responsive.sm} {\n        width: 100%;\n      }\n    `,\n\n    messageContainer: css`\n      position: relative;\n      overflow: hidden;\n      max-width: 100%;\n\n      ${responsive.sm} {\n        overflow-x: auto;\n      }\n    `,\n\n    messageContainerEditing: css`\n      ${editingStylish}\n      position: relative;\n      overflow: hidden;\n      max-width: 100%;\n\n      ${responsive.sm} {\n        overflow-x: auto;\n      }\n    `,\n\n    messageContainerEditingWithTime: css`\n      ${editingStylish}\n      position: relative;\n      overflow: hidden;\n      max-width: 100%;\n      margin-block-start: -16px;\n\n      ${responsive.sm} {\n        overflow-x: auto;\n      }\n    `,\n\n    messageContainerWithTime: css`\n      position: relative;\n      overflow: hidden;\n      max-width: 100%;\n      margin-block-start: -16px;\n\n      ${responsive.sm} {\n        overflow-x: auto;\n      }\n    `,\n\n    messageContent: css`\n      position: relative;\n      overflow: hidden;\n      max-width: 100%;\n\n      ${responsive.sm} {\n        flex-direction: column !important;\n      }\n    `,\n\n    messageContentEditing: css`\n      ${editingStylish}\n      position: relative;\n      overflow: hidden;\n      max-width: 100%;\n\n      ${responsive.sm} {\n        flex-direction: column !important;\n      }\n    `,\n\n    messageDocsWithTitle: css`\n      ${rawStylishWithTitle}\n      position: relative;\n      overflow: hidden;\n      max-width: 100%;\n\n      ${responsive.sm} {\n        width: 100%;\n      }\n    `,\n\n    messageDocsWithoutTitle: css`\n      ${rawStylishWithoutTitle}\n      position: relative;\n      overflow: hidden;\n      max-width: 100%;\n\n      ${responsive.sm} {\n        width: 100%;\n      }\n    `,\n\n    messageExtra: css`\n      /* message-extra class */\n    `,\n\n    nameLeft: css`\n      pointer-events: none;\n\n      margin-block-end: 6px;\n\n      font-size: 12px;\n      line-height: 1;\n      color: ${cssVar.colorTextDescription};\n      text-align: start;\n    `,\n\n    nameRight: css`\n      pointer-events: none;\n\n      margin-block-end: 6px;\n\n      font-size: 12px;\n      line-height: 1;\n      color: ${cssVar.colorTextDescription};\n      text-align: end;\n    `,\n  };\n});\n"],"mappings":";;;AAEA,MAAa,SAAS,oBAAoB,EAAE,YAAK,uBAAa;CAC5D,MAAM,eAAe,KAAG;;;2CAGiBA,SAAO,qBAAqB;qBAClDA,SAAO,eAAe;;wBAEnBA,SAAO,iBAAiB;;CAG9C,MAAM,sBAAsB,KAAG;;;CAI/B,MAAM,yBAAyB,KAAG;;;CAIlC,MAAM,sBAAsB,KAAG;;yCAEQA,SAAO,cAAc;;CAG5D,MAAM,iBAAiB,KAAG;;;AAI1B,QAAO;EAEL,mBAAmB,KAAG;;;;;EAKtB,oBAAoB,KAAG;;;;;EAKvB,iBAAiB,KAAG;;;;;EAKpB,kBAAkB,KAAG;;;;;EAKrB,gBAAgB,KAAG;;;;EAKnB,iBAAiB,KAAG;;;;;;EAMpB,sBAAsB,KAAG;;;EAGzB,WAAW,KAAG;;;;;;;;;;;;;;;;;;;;;oCAqBkBA,SAAO,cAAc;;;;;;;;;;;;;;;;;wBAiBjCA,SAAO,kBAAkB;;;;QAIzC,WAAW,GAAG;;;;;EAMlB,eAAe,KAAG;QACd,oBAAoB;;;;;;;;;;;;;;;;;;;;;oCAqBQA,SAAO,cAAc;;;;;;;;;;;;;;;;QAgBjD,WAAW,GAAG;;;;;EAKlB,kBAAkB,KAAG;QACjB,eAAe;;;0BAGGA,SAAO,qBAAqB;;;;wBAI9BA,SAAO,YAAY;;;EAIvC,sBAAsB,KAAG;QACrB,eAAe;;;0BAGGA,SAAO,qBAAqB;uBAC/BA,SAAO,aAAa;;oBAEvBA,SAAO,oBAAoB;;;;wBAIvBA,SAAO,YAAY;;;EAIvC,cAAc,KAAG;;;EAIjB,gBAAgB,KAAG;;;;;EAMnB,aAAa,KAAG;;;;;;;;;eASLA,SAAO,cAAc;;oBAEhBA,SAAO,aAAa;;EAGpC,cAAc,KAAG;;;;;;;;;eASNA,SAAO,cAAc;;oBAEhBA,SAAO,aAAa;;EAGpC,eAAe,KAAG;QACd,aAAa;;;;;QAKb,WAAW,GAAG;;;;EAKlB,kBAAkB,KAAG;;;;;QAKjB,WAAW,GAAG;;;;EAKlB,yBAAyB,KAAG;QACxB,eAAe;;;;;QAKf,WAAW,GAAG;;;;EAKlB,iCAAiC,KAAG;QAChC,eAAe;;;;;;QAMf,WAAW,GAAG;;;;EAKlB,0BAA0B,KAAG;;;;;;QAMzB,WAAW,GAAG;;;;EAKlB,gBAAgB,KAAG;;;;;QAKf,WAAW,GAAG;;;;EAKlB,uBAAuB,KAAG;QACtB,eAAe;;;;;QAKf,WAAW,GAAG;;;;EAKlB,sBAAsB,KAAG;QACrB,oBAAoB;;;;;QAKpB,WAAW,GAAG;;;;EAKlB,yBAAyB,KAAG;QACxB,uBAAuB;;;;;QAKvB,WAAW,GAAG;;;;EAKlB,cAAc,KAAG;;;EAIjB,UAAU,KAAG;;;;;;;eAOFA,SAAO,qBAAqB;;;EAIvC,WAAW,KAAG;;;;;;;eAOHA,SAAO,qBAAqB;;;EAGxC;EACD"}