cozy-search/dist/components/Conversations/styles.styl

UI components about search bar and IA assistant

@require 'settings/breakpoints.styl'

.composerContainer
    position relative
    border 1px solid var(--borderMainColor)
    border-radius 20px
    padding 8px 8px 8px 16px
    background-color var(--paperBackgroundColor)
    z-index calc(var(--zIndex-modal) + 15)

.composerActions
    margin-top 16px
    gap 8px

.conversationBar
    flex 1
    min-width 0
    max-height 95px
    min-height 32px
    background-color transparent !important
    border 0 !important

    +gt-mobile()
      max-height 178px

    &--mobile
      background-color transparent !important
      border-color transparent !important

.conversationViewport
  +mobile()
    // Small symmetric gutter so the LLM response uses nearly the full
    // mobile width. The floating sidebar-toggle button sits on an opaque
    // tile, so text scrolling beneath it stays visually covered.
    padding-left 8px
    padding-right 8px


.conversationBar-input
  max-height 80px

  +gt-mobile()
    max-height 155px

.chatConversation
  overflow-y scroll

  &::-webkit-scrollbar
    display: none

.conversationHeaderBar
  box-shadow inset 0 -1px 0 0 var(--dividerColor)
  background-color var(--paperBackgroundColor)

.conversationList
  box-shadow inset -1px 0 0 0 var(--dividerColor)

  &--container
    overflow-y scroll

    &::-webkit-scrollbar
      display none

  &--hidden
    display: none

.conversationListItem
  &--selected
    background-color var(--defaultBackgroundColor) !important

.menuToggler
  position absolute
  box-sizing border-box

  &--disabled
    border-bottom: 1px solid var(--dividerColor)
    border-right: 1px solid var(--dividerColor)
    border-bottom-right-radius: 1rem
    background: var(--paperBackgroundColor)

.conversationChips-container
    gap 0px

.conversationChips-startIcon
    opacity 0.6

.conversationChips-chipIcon
    margin-left 12px !important

.conversationChips-deleteIcon
    height 1rem !important
    &.is-warning
        fill var(--warningColor)
        color var(--warningColor)

.conversationChips-chip
    border-style solid
    margin-right 0 !important

// Prevent horizontal overflow on message content
.cozyThread-messageContent
  overflow-wrap break-word
  word-wrap break-word
  word-break break-word
  hyphens auto

.conversation-list-item
  border-radius 8px !important
  align-items stretch !important
  // force 0 gap to override cozy-ui gap 16px on .MuiListItem-root
  gap: 0 !important

  &:hover .conversation-list-item-action,
  &:focus-within .conversation-list-item-action
    opacity 1
    pointer-events auto

  &--selected
    &--light
      background var(--primaryColorLightest) !important
    &--dark
      background var(--grey900) !important

  &--wider
    align-items center !important

.conversation-list-item-divider
  // Counteract the item's 16px horizontal padding so the divider spans the
  // full width and sits flush with the bottom edge of the selected highlight
  margin 8px -16px -8px -16px !important

.conversation-list-item-action
  position absolute !important
  top 8px
  right 8px
  opacity 0
  pointer-events none

.conversation-list-item-text
  line-height 16px
  overflow hidden
  margin-right 28px !important

.conversation-list-item-title
  color var(--primaryTextColor)
  font-size 14px
  font-weight 500
  line-height 16px
  letter-spacing 0.5px

.conversation-list-item-meta
  gap 4px

.conversation-list-item-subtitle
  color var(--secondaryTextColor)
  font-size 11px
  font-weight 400
  line-height 16px