@genesislcap/ai-assistant 14.403.0-ai-assistant.1

package/src/main/main.styles.ts

@@ -0,0 +1,357 @@
+import { css } from '@genesislcap/web-core';
+
+export const styles = css`
+  :host {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    font-family: var(--body-font);
+    color: var(--neutral-foreground-rest);
+  }
+
+  .chat-wrapper {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+    background-color: var(--neutral-layer-1);
+    border: 1px solid var(--neutral-stroke-rest);
+    border-radius: var(--control-corner-radius) * 1px;
+  }
+
+  .chat-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: calc(var(--design-unit) * 2px) calc(var(--design-unit) * 3px);
+    border-bottom: 1px solid var(--neutral-stroke-rest);
+    background-color: var(--neutral-layer-2);
+  }
+
+  .chat-header.draggable {
+    cursor: move;
+    user-select: none;
+  }
+
+  .chat-title {
+    font-weight: bold;
+    font-size: 1.2em;
+  }
+
+  .header-actions {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    margin-left: auto;
+  }
+
+  .settings-button,
+  .popout-button {
+    font-size: 1.2em;
+  }
+
+  ::slotted([slot='header-actions-extra']) {
+    font-size: 1.2em;
+  }
+
+  .settings-panel {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: calc(var(--design-unit) * 4px);
+    padding: calc(var(--design-unit) * 2px) calc(var(--design-unit) * 3px);
+    border-bottom: 1px solid var(--neutral-stroke-rest);
+    background-color: var(--neutral-layer-2);
+  }
+
+  .settings-animations {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--design-unit) * 2px);
+  }
+
+  .messages {
+    flex: 1;
+    overflow-y: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  @keyframes slide-in-right {
+    from {
+      opacity: 0%;
+      transform: translateX(16px);
+    }
+
+    to {
+      opacity: 100%;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes slide-in-left {
+    from {
+      opacity: 0%;
+      transform: translateX(-16px);
+    }
+
+    to {
+      opacity: 100%;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes thinking-ring {
+    0% {
+      transform: scale(1);
+      opacity: 60%;
+    }
+
+    100% {
+      transform: scale(1.8);
+      opacity: 0%;
+    }
+  }
+
+  .message-row {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .message-row.user {
+    flex-direction: row-reverse;
+    animation: slide-in-right 0.25s ease-out;
+  }
+
+  .message-row.ai,
+  .message-row.ai-thinking,
+  .message-row.ai-function {
+    animation: slide-in-left 0.25s ease-out;
+  }
+
+  .message-row.interaction {
+    flex-direction: column;
+    animation: slide-in-left 0.25s ease-out;
+  }
+
+  .avatar {
+    position: relative;
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    background-color: var(--neutral-layer-3);
+    border: 1px solid var(--neutral-stroke-rest);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    font-size: 1em;
+    overflow: hidden;
+  }
+
+  .avatar.ai-thinking {
+    border-color: #7c3aed;
+    overflow: visible;
+  }
+
+  .avatar.ai-thinking::before,
+  .avatar.ai-thinking::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: 50%;
+    border: 2px solid #7c3aed;
+    animation: thinking-ring 1.5s ease-out infinite;
+  }
+
+  .avatar.ai-thinking::after {
+    animation-delay: 0.75s;
+  }
+
+  .avatar-img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 50%;
+  }
+
+  .message {
+    padding: calc(var(--design-unit) * 2px) calc(var(--design-unit) * 3px);
+    max-width: 80%;
+    min-width: 70px;
+    font-family: var(--body-font);
+    font-size: 1.1em;
+  }
+
+  .message.user {
+    background: linear-gradient(
+      135deg,
+      var(--accent-fill-rest) 0%,
+      color-mix(in srgb, var(--accent-fill-rest) 70%, black) 100%
+    );
+    color: var(--accent-foreground-on-accent-rest);
+    border-radius: 18px 18px 4px;
+    box-shadow: 0 2px 8px color-mix(in srgb, var(--accent-fill-rest) 35%, transparent);
+  }
+
+  .message.ai {
+    background: linear-gradient(135deg, var(--neutral-layer-3) 0%, var(--neutral-layer-4) 100%);
+    color: var(--neutral-foreground-rest);
+    border-radius: 18px 18px 18px 4px;
+    border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-rest);
+  }
+
+  .message.ai-thinking {
+    background: linear-gradient(135deg, rgb(91 33 182 / 12%) 0%, rgb(59 7 100 / 18%) 100%);
+    color: var(--neutral-foreground-rest);
+    border-radius: 18px 18px 18px 4px;
+    border-left: 2px solid #7c3aed;
+    font-style: italic;
+    font-size: 0.95em;
+  }
+
+  .message.ai-function {
+    background: linear-gradient(135deg, rgb(15 32 39 / 90%) 0%, rgb(30 58 58 / 80%) 100%);
+    color: #86efac;
+    border-radius: 18px 18px 18px 4px;
+    font-size: 1em;
+    border: 1px solid rgb(134 239 172 / 20%);
+  }
+
+  .message.interaction {
+    background: none;
+    border: none;
+    padding: 0;
+    max-width: 100%;
+    width: 100%;
+  }
+
+  .sender {
+    font-weight: bold;
+    font-size: 0.9em;
+    margin-bottom: 4px;
+  }
+
+  .payload {
+    font-family: monospace;
+    white-space: pre-wrap;
+    margin: 0;
+    font-size: 0.95em;
+  }
+
+  .input-row {
+    display: flex;
+    gap: calc(var(--design-unit) * 2px);
+    align-items: flex-end;
+    padding: calc(var(--design-unit) * 2px) calc(var(--design-unit) * 3px);
+    border-top: 1px solid var(--neutral-stroke-rest);
+    background-color: var(--neutral-layer-2);
+  }
+
+  .chat-input {
+    flex: 1;
+    resize: none;
+    max-height: 150px;
+  }
+
+  .file-input {
+    display: none;
+  }
+
+  .thinking-dots {
+    display: flex;
+    align-items: center;
+    align-self: center;
+    gap: 5px;
+    padding: calc(var(--design-unit) * 2px) calc(var(--design-unit) * 3px);
+  }
+
+  .dot {
+    width: 9px;
+    height: 9px;
+    border-radius: 50%;
+    background-image: linear-gradient(145deg, rgb(255 255 255 / 40%) 0%, rgb(0 0 0 / 0%) 100%);
+    animation: dot-bounce 1.5s linear infinite;
+  }
+
+  .dot-1 {
+    background-color: #feb60a;
+    animation-delay: 0s;
+  }
+
+  .dot-2 {
+    background-color: #ff0062;
+    animation-delay: 0.1s;
+  }
+
+  .dot-3 {
+    background-color: #00dbf9;
+    animation-delay: 0.2s;
+  }
+
+  .dot-4 {
+    background-color: #da00f7;
+    animation-delay: 0.3s;
+  }
+
+  @keyframes dot-bounce {
+    0%,
+    50%,
+    100% {
+      transform: scale(1);
+      filter: blur(0);
+    }
+
+    25% {
+      transform: scale(0.6);
+      filter: blur(2px);
+    }
+
+    75% {
+      transform: scale(1.4);
+      filter: blur(2px);
+    }
+  }
+
+  .attachment-chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    padding: 0 calc(var(--design-unit) * 3px) calc(var(--design-unit) * 2px);
+  }
+
+  .attachment-chip {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 8px;
+    background-color: var(--neutral-layer-4);
+    border-radius: calc(var(--control-corner-radius) * 1px);
+    font-size: 0.9em;
+    border: 1px solid var(--neutral-stroke-rest);
+  }
+
+  .attachment-chip-error {
+    background-color: var(--error-fill-rest);
+    border-color: var(--error-stroke-rest);
+  }
+
+  .chip-remove {
+    background: none;
+    border: none;
+    color: var(--neutral-foreground-rest);
+    cursor: pointer;
+    font-size: 1.2em;
+    padding: 0 0 0 4px;
+    opacity: 70%;
+  }
+
+  .chip-remove:hover {
+    opacity: 100%;
+  }
+`;