chrome-devtools-frontend/front_end/panels/ai_assistance/components/chatView.css

Chrome DevTools UI

/*
 * Copyright 2024 The Chromium Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file.
 */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:host {
  width: 100%;
  height: 100%;
  user-select: text;
  display: flex;
  flex-direction: column;
  background-color: var(--sys-color-cdt-base-container);
}

.chat-ui {
  width: 100%;
  height: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
}

.input-form {
  display: flex;
  flex-direction: column;
  padding: var(--sys-size-5) var(--sys-size-5) 0 var(--sys-size-5);
  max-width: var(--sys-size-36);
  background-color: var(--sys-color-cdt-base-container);
  width: 100%;
  position: sticky;
  z-index: 9999;
  bottom: 0;
  /*
  The `box-shadow` is a workaround to hide the content appearing between the `.input-form`
  and the footer in some resolutions even though the `.input-form` has `bottom: 0`.
  */
  box-shadow: 0 1px var(--sys-color-cdt-base-container);

  /* Prevents the input form from jumping when the scrollbar is shown */
  /* 688px is the max width of the input form + left and right paddings: var(--sys-size-36) + 2 * var(--sys-size-5)  */
  /* stylelint-disable-next-line at-rule-no-unknown */
  @container (width > 688px) {
    /* stylelint-disable-next-line unit-no-unknown */
    --half-scrollbar-width: calc((100cqw - 100%) / 2);

    margin-left: var(--half-scrollbar-width);
    margin-right: calc(-1 * var(--half-scrollbar-width));
  }

  /* when there isn't enough space to view the messages,
  do not overlay the input form on top of the messages */
  /* height < var(--sys-size-27) */
  /* stylelint-disable-next-line at-rule-no-unknown */
  @container (height < 224px) {
    position: static;
  }

  & .input-form-shadow-container {
    position: absolute;
    top: 0;
    left: -2px; /* Needed for aligning with other divider lines */
    width: calc(100% + 4px); /* Needed for extending the divider line to the edges */
    height: var(--sys-size-4);

    & .input-form-shadow {
      height: 100%;
      box-shadow: 0 -3px 2px -2px var(--app-color-ai-assistance-input-divider);
      animation: reveal;
      opacity: 0%;
      /* stylelint-disable-next-line property-no-unknown */
      animation-timeline: --scroll-timeline;
    }
  }

  &:has(.change-summary) .input-form-shadow-container {
    display: none;
  }
}

.chat-readonly-container {
  display: flex;
  width: 100%;
  max-width: var(--sys-size-36);
  justify-content: center;
  align-items: center;
  background-color: var(--sys-color-surface3);
  font: var(--sys-typescale-body4-regular);
  padding: var(--sys-size-5) 0;
  border-radius: var(--sys-shape-corner-medium-small);
  margin-bottom: var(--sys-size-5);
  color: var(--sys-color-on-surface-subtle);
}

.chat-input-container {
  margin: var(--sys-size-4) 0;
  width: 100%;
  display: flex;
  position: relative;
}

.chat-input {
  --right-padding:
    calc(
      var(--sys-size-3) + 26px
    ); /* Gap between the button and the edge + icon's width */

  scrollbar-width: none;
  field-sizing: content; /* stylelint-disable-line property-no-unknown */
  resize: none;
  width: 100%;
  max-height: 84px; /* 4 rows */
  border: 1px solid var(--sys-color-neutral-outline);
  border-radius: var(--sys-shape-corner-small);
  font: var(--sys-typescale-body4-regular);
  line-height: 18px;
  min-height: var(--sys-size-11);
  padding:
    var(--sys-size-4) var(--right-padding) var(--sys-size-4)
    var(--sys-size-4);
  color: var(--sys-color-on-surface);
  background-color: var(--sys-color-cdt-base-container);

  &::placeholder {
    opacity: 60%;
  }

  &:focus-visible {
    outline: 1px solid var(--sys-color-primary);
    border-color: var(--sys-color-primary);
  }

  &:disabled {
    color: var(--sys-color-state-disabled);
    background-color: var(--sys-color-state-disabled-container);
    border-color: transparent;

    &::placeholder {
      color: var(--sys-color-on-surface-subtle);
      opacity: 100%;
    }
  }

  &.two-big-buttons {
    /* cancel + start new chat button */
    --right-padding: 172px;
  }
}

.chat-input-buttons {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: row;
}

.chat-input-button {
  padding-bottom: 3px;
  padding-right: var(--sys-size-3);
}

.chat-inline-button {
  padding-left: 3px;
}

.chat-cancel-context-button {
  padding-bottom: 3px;
  padding-right: var(--sys-size-3);
}

.disclaimer {
  display: flex;
  justify-content: center;
  border-top: var(--sys-size-1) solid var(--sys-color-divider);

  .disclaimer-text {
    max-width: var(--sys-size-36);
    color: var(--sys-color-on-surface-subtle);
    font: var(--sys-typescale-body5-regular);
    text-wrap: pretty;
    padding: var(--sys-size-2) var(--sys-size-5);
  }
}

.messages-container {
  flex-grow: 1;
  width: 100%;
  max-width: var(--sys-size-36);

  /* Prevents the container from jumping when the scrollbar is shown */
  /* 688px is the max width of the input form + left and right paddings: var(--sys-size-36) + 2 * var(--sys-size-5)  */
  /* stylelint-disable-next-line at-rule-no-unknown */
  @container (width > 688px) {
    /* stylelint-disable-next-line unit-no-unknown */
    --half-scrollbar-width: calc((100cqw - 100%) / 2);

    margin-left: var(--half-scrollbar-width);
    margin-right: calc(-1 * var(--half-scrollbar-width));
  }
}

.chat-message {
  user-select: text;
  cursor: initial;
  display: flex;
  flex-direction: column;
  gap: var(--sys-size-5);
  width: 100%;
  padding: var(--sys-size-7) var(--sys-size-5);
  font-size: 12px;
  word-break: break-word;
  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);

  &:last-child {
    border-bottom: 0;
  }

  .message-info {
    display: flex;
    align-items: center;
    height: var(--sys-size-11);
    gap: var(--sys-size-4);
    font: var(--sys-typescale-body4-bold);

    img {
      border: 0;
      border-radius: var(--sys-shape-corner-full);
      display: block;
      height: var(--sys-size-9);
      width: var(--sys-size-9);
    }

    h2 {
      font: var(--sys-typescale-body4-bold);
    }
  }

  .actions {
    display: flex;
    flex-direction: column;
    gap: var(--sys-size-8);
    max-width: 100%;
  }

  .aborted {
    color: var(--sys-color-on-surface-subtle);
  }
}

.select-element {
  display: flex;
  gap: var(--sys-size-3);
  align-items: center;
  width: 100%;

  .resource-link,
  .resource-task {
    cursor: pointer;
    padding: var(--sys-size-2) 3px;
    font: var(--sys-typescale-body4-size);
    border: var(--sys-size-1) solid var(--sys-color-divider);
    border-radius: var(--sys-shape-corner-extra-small);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: var(--sys-size-32);

    &.allow-overflow {
      overflow: visible;
    }

    &:focus-visible {
      outline: 2px solid var(--sys-color-state-focus-ring);
    }

    .icon,
    devtools-file-source-icon {
      display: inline-flex;
      vertical-align: top;
      margin-right: var(--sys-size-3);
      width: var(--sys-size-9);
      height: var(--sys-size-9);
    }

    /*
      CSS styling for `network-override-marker` is similar to
      https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/panels/network/networkLogView.css;l=379.
      There is a difference in `left` and `top` values to make sure
      it is placed correctly for the network icon in assistance panel.
    */
    .network-override-marker {
      position: relative;
      float: left;
    }

    .network-override-marker::before {
      content: var(--image-file-empty);
      width: var(--sys-size-4);
      height: var(--sys-size-4);
      border-radius: 50%;
      outline: var(--sys-size-1) solid var(--icon-gap-focus-selected);
      left: 11px;
      position: absolute;
      top: 13px;
      z-index: 1;
      background-color: var(--sys-color-purple-bright);
    }

    .image.icon {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      margin-right: var(--sys-size-3);

      img {
        max-width: var(--sys-size-8);
        max-height: var(--sys-size-8);
      }
    }
  }

  .resource-link.not-selected,
  .resource-task.not-selected {
    color: var(--sys-color-state-disabled);
    border-color: var(--sys-color-neutral-outline);
  }
}

.indicator {
  color: var(--sys-color-green-bright);
}

.summary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  padding: var(--sys-size-3);
  line-height: var(--sys-size-9);
  cursor: default;
  gap: var(--sys-size-3);
  justify-content: center;
  align-items: center;

  .title {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font: var(--sys-typescale-body4-regular);

    .paused {
      font: var(--sys-typescale-body4-bold);
    }
  }
}

.step-code {
  display: flex;
  flex-direction: column;
  gap: var(--sys-size-2);
}

.js-code-output {
  devtools-code-block {
    --code-block-max-code-height: 50px;
  }
}

.context-details {
  devtools-code-block {
    --code-block-max-code-height: 80px;
  }
}

.step {
  width: fit-content;
  background-color: var(--sys-color-surface3);
  border-radius: var(--sys-size-6);
  position: relative;

  &.empty {
    pointer-events: none;

    .arrow {
      display: none;
    }
  }

  &:not(&[open]):hover::after {
    content: "";
    height: 100%;
    width: 100%;
    border-radius: inherit;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    background-color: var(--sys-color-state-hover-on-subtle);
  }

  &.paused {
    .indicator {
      color: var(--sys-color-on-surface-subtle);
    }
  }

  &.canceled {
    .summary {
      color: var(--sys-color-state-disabled);
      text-decoration: line-through;
    }

    .indicator {
      color: var(--sys-color-state-disabled);
    }
  }

  devtools-markdown-view {
    --code-background-color: var(--sys-color-surface1);
  }

  devtools-icon {
    vertical-align: bottom;
  }

  devtools-spinner {
    width: var(--sys-size-9);
    height: var(--sys-size-9);
    padding: var(--sys-size-2);
  }

  &[open] {
    width: auto;

    .summary .title {
      white-space: normal;
      overflow: unset;
    }

    .summary .arrow {
      transform: rotate(180deg);
    }
  }

  summary::marker {
    content: "";
  }

  .step-details {
    padding: 0 var(--sys-size-5) var(--sys-size-4) var(--sys-size-12);
    display: flex;
    flex-direction: column;
    gap: var(--sys-size-6);

    devtools-code-block {
      --code-block-background-color: var(--sys-color-surface1);
    }
  }
}

.input-header {
  display: inline-flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 2px;
  line-height: 20px;
  gap: var(--sys-size-8);
  position: relative;

  &:has(.change-summary) {
    min-height: var(--sys-size-13);
  }

  & .feedback-icon {
    width: var(--sys-size-8);
    height: var(--sys-size-8);
  }

  & .header-link-container {
    display: inline-flex;
    align-items: center;
    gap: var(--sys-size-2);
    flex-shrink: 0;
  }

  & .header-link-container:first-of-type {
    flex-shrink: 1;
    min-width: 0;
  }
}

.link {
  color: var(--text-link);
  text-decoration: underline;
  cursor: pointer;
}

button.link {
  border: none;
  background: none;
  font: inherit;
}

.select-an-element-text {
  margin-left: 2px;
}

main {
  overflow: hidden auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  container-type: size; /* stylelint-disable-line property-no-unknown */
  scrollbar-width: thin;
  /*
  Even though `transform: translateZ(1px)` doesn't have a visual effect,
  it puts `main` element into another rendering layer which somehow
  fixes the `.input-form` jumping on scroll issue.
  */
  transform: translateZ(1px);

  /* stylelint-disable-next-line property-no-unknown */
  scroll-timeline: --scroll-timeline y;
}

.empty-state-container {
  flex-grow: 1;
  display: grid;
  align-items: center;
  justify-content: center;
  font: var(--sys-typescale-headline4);
  gap: var(--sys-size-8);
  padding: var(--sys-size-3);
  max-width: var(--sys-size-33);

  /* Prevents the container from jumping when the scrollbar is shown */
  /* 688px is the max width of the input form + left and right paddings: var(--sys-size-36) + 2 * var(--sys-size-5)  */
  /* stylelint-disable-next-line at-rule-no-unknown */
  @container (width > 688px) {
    /* stylelint-disable-next-line unit-no-unknown */
    --half-scrollbar-width: calc((100cqw - 100%) / 2);

    margin-left: var(--half-scrollbar-width);
    margin-right: calc(-1 * var(--half-scrollbar-width));
  }

  .header {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    justify-content: center;
    align-self: end;
    gap: var(--sys-size-5);

    .icon {
      display: flex;
      justify-content: center;
      align-items: center;
      height: var(--sys-size-14);
      width: var(--sys-size-14);
      border-radius: var(--sys-shape-corner-small);
      background:
        linear-gradient(
          135deg,
          var(--sys-color-gradient-primary),
          var(--sys-color-gradient-tertiary)
        );
    }

    h1 {
      font: var(--sys-typescale-headline4);
    }

    p {
      text-align: center;
      font: var(--sys-typescale-body4-regular);
    }
  }

  .empty-state-content {
    display: flex;
    flex-direction: column;
    gap: var(--sys-size-5);
    align-items: center;
    justify-content: center;
    align-self: start;
  }
}

.feature-card {
  display: flex;
  padding: var(--sys-size-4) var(--sys-size-6);
  gap: 10px;
  background-color: var(--sys-color-surface2);
  border-radius: var(--sys-shape-corner-medium-small);
  width: 100%;
  align-items: center;

  .feature-card-icon {
    min-width: var(--sys-size-12);
    min-height: var(--sys-size-12);
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--sys-color-tonal-container);
    border-radius: var(--sys-shape-corner-full);

    devtools-icon {
      width: 18px;
      height: 18px;
    }
  }

  .feature-card-content {
    h3 {
      font: var(--sys-typescale-body3-medium);
    }

    p {
      font: var(--sys-typescale-body4-regular);
      line-height: 18px;
    }
  }
}

.disabled-view {
  display: flex;
  max-width: var(--sys-size-34);
  border-radius: var(--sys-shape-corner-small);
  box-shadow: var(--sys-elevation-level3);
  background-color: var(--app-color-card-background);
  font: var(--sys-typescale-body4-regular);
  text-wrap: pretty;
  padding: var(--sys-size-6) var(--sys-size-8);
  margin: var(--sys-size-4) 0;
  line-height: var(--sys-size-9);

  .disabled-view-icon-container {
    border-radius: var(--sys-shape-corner-extra-small);
    width: var(--sys-size-9);
    height: var(--sys-size-9);
    background:
      linear-gradient(
        135deg,
        var(--sys-color-gradient-primary),
        var(--sys-color-gradient-tertiary)
      );
    margin-right: var(--sys-size-5);

    devtools-icon {
      margin: var(--sys-size-2);
    }
  }
}

.error-step {
  color: var(--sys-color-error);
}

.side-effect-confirmation {
  display: flex;
  flex-direction: column;
  gap: var(--sys-size-5);
  padding-bottom: var(--sys-size-4);
}

.side-effect-buttons-container {
  display: flex;
  gap: var(--sys-size-4);
}

.change-summary {
  width: fit-content;
  background-color: var(--sys-color-surface3);
  border-radius: var(--sys-size-6);
  position: relative;
  max-height: 80cqh;
  overflow: auto;
  scrollbar-width: none;

  summary {
    padding-left: var(--sys-size-6);
    padding-right: var(--sys-size-4);
    display: flex;
    align-items: center;
    gap: var(--sys-size-3);
    height: var(--sys-size-13);

    & .difference-icon {
      color: var(--sys-color-on-tonal-container);
      width: var(--sys-size-8);
      height: var(--sys-size-8);
    }

    & .header-text {
      font: var(--sys-typescale-body5-bold);
      color: var(--sys-color-on-surface-subtle);
    }

    & .arrow {
      margin-left: auto;
    }

    &::marker {
      content: "";
    }
  }

  &:not(&[open]):hover::after {
    content: "";
    height: 100%;
    width: 100%;
    border-radius: inherit;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    background-color: var(--sys-color-state-hover-on-subtle);
  }

  &[open] {
    flex: 1;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;

    &::details-content {
      height: fit-content;
      padding: var(--sys-size-2) 0;
      border-radius: inherit;
    }

    summary .arrow {
      transform: rotate(180deg);
    }
  }

  devtools-code-block {
    margin-top: calc(-1 * var(--sys-size-5));

    --code-block-background-color: inherit;
  }
}

@keyframes reveal {
  0%,
  99% {
    opacity: 100%;
  }

  100% {
    opacity: 0%;
  }
}