[AI Assistance] Add a border to input-form to separate it better from the messages

Bug: 373832540
Change-Id: Ifeee52a2aca9f94f6ef704a0124562150ac645b1
Fixed: 373832540
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6088295
Auto-Submit: Samiya Caur <[email protected]>
Reviewed-by: Ergün Erdoğmuş <[email protected]>
Reviewed-by: Peter Müller <[email protected]>
Commit-Queue: Samiya Caur <[email protected]>

Author: Samiya Caur

front_end/panels/ai_assistance/components/ChatView.ts

@@ -1159,6 +1159,9 @@ export class ChatView extends HTMLElement {
     // clang-format off
     return html`
     <form class="input-form" @submit=${this.#handleSubmit}>
+      <div class="input-form-shadow-container">
+        <div class="input-form-shadow"></div>
+      </div>
       ${this.#props.state !== State.CONSENT_VIEW ? html`
         <div class="input-header">
           <div class="header-link-container">

front_end/panels/ai_assistance/components/chatView.css

@@ -61,6 +61,28 @@
   @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;
+      /* stylelint-disable-next-line property-no-unknown */
+      animation-timeline: --scroll-timeline;
+      animation-fill-mode: both;
+
+      --visibility-if-can-scroll: var(--can-scroll) visible;
+      --visibility-if-cant-scroll: hidden;
+
+      visibility: var(--visibility-if-can-scroll, var(--visibility-if-cant-scroll));
+    }
+  }
 }
 
 .chat-readonly-container {
@@ -504,6 +526,12 @@ main {
   fixes the `.input-form` jumping on scroll issue.
   */
   transform: translateZ(1px);
+
+  /* stylelint-disable-next-line property-no-unknown */
+  scroll-timeline: --scroll-timeline y;
+  animation: detect-scroll;
+  /* stylelint-disable-next-line property-no-unknown */
+  animation-timeline: --scroll-timeline;
 }
 
 .empty-state-container {
@@ -652,3 +680,19 @@ main {
   display: flex;
   gap: var(--sys-size-4);
 }
+
+@keyframes reveal {
+  0%,
+  99% {
+    opacity: 100%;
+  }
+
+  100% {
+    opacity: 0%;
+  }
+}
+
+@keyframes detect-scroll {
+  from,
+  to { --can-scroll: ; }
+}

front_end/ui/legacy/themeColors.css

@@ -396,6 +396,11 @@
    * Colors for element panel sidebar subtitle
    */
   --app-color-element-sidebar-subtitle: var(--ref-palette-neutral50);
+
+  /**
+   * Color for input driver for AI assistance chat
+   */
+  --app-color-ai-assistance-input-divider: rgb(0 0 0 / 10%);
 }
 
 :root.baseline-default {
@@ -779,4 +784,9 @@
    * Colors for element panel sidebar subtitle
    */
   --app-color-element-sidebar-subtitle: var(--sys-color-token-subtle);
+
+  /**
+   * Color for input driver for AI assistance chat
+   */
+  --app-color-ai-assistance-input-divider: rgb(255 255 255 / 15%);
 }