@gooddata/sdk-ui-gen-ai 10.12.0-alpha.3

package/styles/scss/agentIcon.scss

@@ -0,0 +1,122 @@
+// (C) 2024 GoodData Corporation
+
+@use "sass:color";
+@use "variables" as variables;
+@use "@gooddata/sdk-ui-kit/styles/scss/variables" as kit-variables;
+@use "@gooddata/sdk-ui-kit/styles/scss/mixins" as kit-mixins;
+@use "@gooddata/sdk-ui-kit/styles/scss/Form/mixins" as form-mixins;
+
+// Needed for spinner as a mid-point color
+$gd-palette-primary-base-midpoint: color-mix(
+    in sRGB,
+    kit-variables.$gd-color-highlight 50%,
+    kit-variables.$gd-palette-primary-dimmed 50%
+);
+
+.gd-gen-ai-chat__agent_icon {
+    width: 32px;
+    height: 32px;
+    flex-shrink: 0;
+
+    &__background {
+        fill: kit-variables.$gd-palette-primary-dimmed;
+    }
+
+    &__circle {
+        fill: none;
+        stroke-width: 2px;
+        transform: translate(16px, 16px);
+    }
+
+    &__star {
+        fill: kit-variables.$gd-palette-primary-base;
+    }
+
+    &--loading & {
+        &__circle {
+            animation: gd-gen-ai-chat__agent_icon--rotation 2s linear infinite;
+        }
+
+        &__star--flickr {
+            $duration: 2s;
+
+            animation: gd-gen-ai-chat__agent_icon--flickr $duration linear infinite;
+
+            &--delay {
+                animation-delay: calc($duration / 3);
+            }
+        }
+    }
+
+    &--appear & {
+        &__background {
+            animation: gd-gen-ai-chat__agent_icon--appear 0.3s ease-out;
+        }
+    }
+
+    &--error & {
+        &__background {
+            fill: none;
+            stroke-width: 1px;
+            stroke: kit-variables.$gd-palette-error-dimmed;
+            animation: gd-gen-ai-chat__agent_icon--appear--error 0.3s ease-out;
+        }
+    }
+
+    &__grad {
+        &--from {
+            stop-color: kit-variables.$gd-palette-primary-base;
+        }
+        &--mid {
+            stop-color: $gd-palette-primary-base-midpoint;
+        }
+        &--to {
+            stop-color: kit-variables.$gd-palette-primary-base-t80;
+        }
+    }
+}
+
+@keyframes gd-gen-ai-chat__agent_icon--rotation {
+    0% {
+        transform: translate(16px, 16px) rotate(0deg);
+    }
+    100% {
+        transform: translate(16px, 16px) rotate(360deg);
+    }
+}
+
+@keyframes gd-gen-ai-chat__agent_icon--flickr {
+    0% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes gd-gen-ai-chat__agent_icon--appear {
+    0% {
+        fill: kit-variables.$gd-palette-primary-dimmed;
+    }
+    50% {
+        fill: kit-variables.$gd-palette-primary-base;
+    }
+    100% {
+        fill: kit-variables.$gd-palette-primary-dimmed;
+    }
+}
+
+@keyframes gd-gen-ai-chat__agent_icon--appear--error {
+    0% {
+        fill: #fff0;
+    }
+    50% {
+        fill: kit-variables.$gd-palette-error-dimmed;
+    }
+    100% {
+        fill: #fff0;
+    }
+}

package/styles/scss/agentState.scss

@@ -0,0 +1,31 @@
+// (C) 2024 GoodData Corporation
+
+@use "sass:color";
+@use "variables" as variables;
+@use "@gooddata/sdk-ui-kit/styles/scss/variables" as kit-variables;
+@use "@gooddata/sdk-ui-kit/styles/scss/mixins" as kit-mixins;
+@use "@gooddata/sdk-ui-kit/styles/scss/Form/mixins" as form-mixins;
+
+.gd-gen-ai-chat__agent_state {
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+    align-items: center;
+    margin-bottom: 39px;
+
+    &__status {
+        animation: gd-gen-ai-agent-state 3s infinite linear;
+    }
+}
+
+@keyframes gd-gen-ai-agent-state {
+    0% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.3;
+    }
+    100% {
+        opacity: 1;
+    }
+}

package/styles/scss/input.scss

@@ -0,0 +1,107 @@
+// (C) 2024 GoodData Corporation
+
+@use "sass:color";
+@use "@gooddata/sdk-ui-kit/styles/scss/variables" as kit-variables;
+@use "@gooddata/sdk-ui-kit/styles/scss/mixins" as kit-mixins;
+@use "@gooddata/sdk-ui-kit/styles/scss/Form/mixins" as form-mixins;
+@use "variables" as variables;
+
+.gd-gen-ai-chat__input {
+    position: relative;
+    margin: 0 variables.$x-spacing;
+
+    &__textarea {
+        @include form-mixins.gd-input-base;
+        @include kit-mixins.border-radius(3px);
+        @include kit-mixins.box-shadow(
+            inset 0 1px 1px 0 color.adjust(kit-variables.$gd-input-text-box-shadow-color, $alpha: -0.85)
+        );
+
+        @include kit-mixins.placeholder {
+            color: var(
+                --gd-palette-complementary-6,
+                color.adjust(kit-variables.$default-gd-color-link, $alpha: -0.25)
+            );
+
+            @include kit-mixins.transition(color, 0.25s, ease-in-out);
+        }
+
+        resize: none;
+        box-sizing: border-box;
+        width: 100%;
+        outline: 0;
+        overflow: hidden;
+        padding-right: 30px; // Make space for the send button
+
+        &:hover {
+            @include kit-mixins.placeholder {
+                color: kit-variables.$gd-color-link;
+            }
+
+            border-color: kit-variables.$gd-input-text-hover-border;
+        }
+
+        &:focus {
+            @include kit-mixins.box-shadow(
+                inset 0 1px 1px 0 color.adjust(kit-variables.$gd-input-text-box-shadow-color, $alpha: -0.8)
+            );
+
+            outline: 0;
+            border-color: kit-variables.$gd-palette-primary-base;
+        }
+
+        &:disabled,
+        &.disabled {
+            &,
+            &:hover {
+                @include kit-mixins.box-shadow(none);
+
+                color: kit-variables.$gd-color-disabled;
+                border-color: kit-variables.$gd-input-text-border;
+                background-color: kit-variables.$gd-color-light;
+            }
+        }
+    }
+
+    &__send_button {
+        @include kit-mixins.transition(all, 0.25s, ease-in-out);
+
+        position: absolute;
+        top: 8.5px; // (line-height - own-height) / 2
+        height: 15px;
+        right: 10px;
+        cursor: pointer;
+
+        & path {
+            fill: kit-variables.$gd-color-link;
+        }
+
+        &:hover path {
+            fill: kit-variables.$gd-palette-primary-base;
+        }
+
+        &--disabled,
+        &--disabled:hover {
+            cursor: default;
+
+            path {
+                fill: kit-variables.$gd-color-disabled;
+            }
+        }
+    }
+
+    &:focus-within &__send_button {
+        path {
+            fill: kit-variables.$gd-palette-primary-base;
+        }
+
+        &--disabled,
+        &--disabled:hover {
+            cursor: default;
+
+            path {
+                fill: kit-variables.$gd-color-disabled;
+            }
+        }
+    }
+}

package/styles/scss/main.scss

@@ -0,0 +1,26 @@
+// (C) 2024 GoodData Corporation
+@use "@gooddata/sdk-ui-kit/styles/scss/variables" as kit-variables;
+
+@use "input";
+@use "variables" as variables;
+@use "messages";
+@use "agentState";
+@use "agentIcon";
+@use "window";
+
+.gd-gen-ai-chat {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    gap: variables.$y-spacing;
+    width: 100%;
+    height: 100%;
+    background-color: kit-variables.$gd-color-light;
+
+    & &__disclaimer {
+        font-size: 12px;
+        color: kit-variables.$gd-color-state-blank;
+        text-align: center;
+        margin: 0 variables.$x-spacing variables.$y-spacing;
+    }
+}

package/styles/scss/messages.scss

@@ -0,0 +1,111 @@
+// (C) 2024 GoodData Corporation
+
+@use "sass:color";
+@use "variables" as variables;
+@use "@gooddata/sdk-ui-kit/styles/scss/variables" as kit-variables;
+@use "@gooddata/sdk-ui-kit/styles/scss/mixins" as kit-mixins;
+@use "@gooddata/sdk-ui-kit/styles/scss/Form/mixins" as form-mixins;
+
+.gd-gen-ai-chat__messages {
+    flex: 1;
+    overflow-y: auto;
+    padding: variables.$y-spacing variables.$x-spacing 0;
+
+    &__scroll {
+        display: flex;
+        flex-direction: column;
+        gap: 15px;
+    }
+
+    &__message {
+        display: flex;
+
+        &--user {
+            $tail-height: 7px;
+            $tail-width: 10px;
+
+            max-width: 80%;
+            background-color: kit-variables.$gd-palette-primary-base;
+            border-radius: 3px 3px 0 3px;
+            padding: 4.5px 12px;
+            position: relative;
+            align-self: flex-end;
+            margin-bottom: 29px;
+            animation: gd-gen-ai-message-in 0.3s ease-out;
+
+            &::after {
+                content: "";
+                position: absolute;
+                bottom: -$tail-height;
+                right: 0;
+                border: 0 solid transparent;
+                border-top: $tail-height solid kit-variables.$gd-palette-primary-base;
+                border-left-width: $tail-width;
+                width: 0;
+                height: 0;
+            }
+
+            .gd-gen-ai-chat__messages__contents {
+                color: kit-variables.$gd-color-white;
+            }
+        }
+
+        &--assistant {
+            display: flex;
+            flex-direction: row;
+            gap: 10px;
+            align-items: flex-start;
+            margin-bottom: 39px;
+        }
+
+        &--error .gd-gen-ai-chat__messages__contents {
+            flex: unset;
+            padding: 4.5px 12px;
+            border-radius: 3px;
+            background: kit-variables.$gd-palette-error-dimmed;
+            color: kit-variables.$gd-palette-error-base;
+        }
+    }
+
+    &__contents {
+        flex: 1;
+        padding: 4.5px 0;
+    }
+
+    &__empty {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+
+        &__h1--accent {
+            color: kit-variables.$gd-palette-primary-base;
+        }
+
+        & .gd-button {
+            margin-top: 2em;
+
+            & + .gd-button {
+                margin-top: 1em;
+                margin-left: 0;
+            }
+        }
+    }
+
+    &__visualization {
+        margin: 10px 0;
+        padding: 10px;
+        border: 1px solid kit-variables.$is-focused-background;
+        border-radius: 8px;
+    }
+}
+
+@keyframes gd-gen-ai-message-in {
+    0% {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}

package/styles/scss/variables.scss

@@ -0,0 +1,4 @@
+// (C) 2024 GoodData Corporation
+
+$x-spacing: 15px;
+$y-spacing: 10px;

package/styles/scss/window.scss

@@ -0,0 +1,122 @@
+// (C) 2024 GoodData Corporation
+
+@use "sass:color";
+@use "variables" as variables;
+@use "@gooddata/sdk-ui-kit/styles/scss/variables" as kit-variables;
+@use "@gooddata/sdk-ui-kit/styles/scss/mixins" as kit-mixins;
+@use "@gooddata/sdk-ui-kit/styles/scss/Form/mixins" as form-mixins;
+
+.gd-gen-ai-chat__window {
+    width: 420px;
+    height: calc(100vh - 84px);
+    background-color: kit-variables.$gd-color-light;
+    border: 1px solid kit-variables.$gd-border-color;
+    border-radius: 3px;
+    // TODO - use color from variables
+    box-shadow: 0 1px 20px 0 #14385d26;
+    display: flex;
+    flex-direction: column;
+
+    &--fullscreen {
+        width: 768px;
+        height: calc(100vh - 60px);
+    }
+
+    &__header {
+        flex-shrink: 0;
+        height: 45px;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 16px;
+        padding: 0 16px;
+    }
+
+    &__header__gap {
+        flex: 1;
+    }
+
+    &__header__divider {
+        width: 1px;
+        height: 29px;
+        background-color: kit-variables.$gd-border-color;
+    }
+
+    &__header__icon {
+        display: flex;
+        cursor: pointer;
+
+        & svg path {
+            transition: fill 0.2s;
+            fill: kit-variables.$gd-color-label;
+        }
+
+        &--disabled {
+            cursor: default;
+
+            & svg path {
+                fill: kit-variables.$gd-color-disabled;
+            }
+        }
+
+        & svg {
+            width: 18px;
+            height: 18px;
+        }
+
+        &--reset:not(&--disabled):hover {
+            & svg path {
+                fill: kit-variables.$gd-palette-error-base;
+            }
+        }
+
+        &--close:not(&--disabled):hover,
+        &--fullscreen:not(&--disabled):hover {
+            & svg path {
+                fill: kit-variables.$gd-palette-primary-base;
+            }
+        }
+
+        &[data-gd-tooltip] {
+            position: relative;
+        }
+
+        &[data-gd-tooltip]::before {
+            content: "";
+            position: absolute;
+            top: -4px;
+            left: 50%;
+            transform: translateX(-50%);
+            border-width: 4px 6px 0 6px;
+            border-style: solid;
+            border-color: kit-variables.$gd-color-text transparent transparent transparent;
+            z-index: 100;
+            opacity: 0;
+            pointer-events: none;
+            transition: opacity 0.2s;
+        }
+        &[data-gd-tooltip]::after {
+            content: attr(data-gd-tooltip);
+            position: absolute;
+            top: -4px;
+            left: 50%;
+            transform: translateX(-50%) translateY(-100%);
+            background: kit-variables.$gd-color-text;
+            text-align: center;
+            color: kit-variables.$gd-color-white;
+            padding: 0.3em 0.6em;
+            font-size: 0.85em;
+            min-width: 5em;
+            text-wrap: balance;
+            border-radius: 5px;
+            pointer-events: none;
+            opacity: 0;
+            transition: opacity 0.2s;
+        }
+
+        &[data-gd-tooltip]:hover::after,
+        &[data-gd-tooltip]:hover::before {
+            opacity: 1;
+        }
+    }
+}