@truedat/ai 8.5.4 → 8.5.6

package/src/styles/assistant.less

@@ -1,61 +1,3 @@
-.assistant-container {
-  position: fixed;
-  bottom: calc(1.5rem + 10px);
-  right: calc(1.5rem + 10px);
-  z-index: 1000;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
-  transition:
-    width 0.3s ease,
-    height 0.3s ease,
-    border-radius 0.3s ease,
-    background 0.2s ease 0s,
-    color 0.2s ease 0s;
-
-  &--closed {
-    width: 5rem;
-    height: 5rem;
-    border-radius: 50%;
-    align-items: center;
-    justify-content: center;
-    background: #fff;
-    color: #013c54;
-    border: 2px solid #013c54;
-    cursor: pointer;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
-    transition:
-      width 0.3s ease,
-      height 0.3s ease,
-      border-radius 0.3s ease,
-      box-shadow 0.3s ease,
-      background 0.2s ease 0.3s,
-      color 0.2s ease 0.3s;
-
-    &:hover {
-      animation: assistant-aurora-halo 0.65s ease-in 1 forwards;
-      width: 5.15rem;
-      height: 5.15rem;
-    }
-  }
-
-  &--open {
-    width: 33vw;
-    min-width: 400px;
-    height: 80vh;
-    border-radius: 1rem;
-    background: #fff;
-    color: inherit;
-    transition:
-      width 0.3s ease,
-      height 0.3s ease,
-      border-radius 0.3s ease,
-      background 0.2s ease 0s,
-      color 0.2s ease 0s;
-  }
-}
-
 .assistant-content--fade-out {
   opacity: 0;
   transition: opacity 0.15s ease-out;
@@ -79,121 +21,198 @@
 }
 
 @keyframes assistant-aurora-halo {
-  0% {
-    box-shadow:
-      0 0 0 rgba(1, 60, 84, 0),
-      0 0 0 rgba(1, 60, 84, 0),
-      0 2px 8px rgba(0, 0, 0, 0.2);
-  }
-  20% {
-    box-shadow:
-      8px 0 14px rgba(1, 60, 84, 0.55),
-      0 0 22px rgba(1, 60, 84, 0.2),
-      0 2px 8px rgba(0, 0, 0, 0.2);
-  }
-  40% {
-    box-shadow:
-      0 8px 14px rgba(1, 60, 84, 0.55),
-      0 0 22px rgba(1, 60, 84, 0.2),
-      0 2px 8px rgba(0, 0, 0, 0.2);
-  }
-  60% {
-    box-shadow:
-      -8px 0 14px rgba(1, 60, 84, 0.55),
-      0 0 22px rgba(1, 60, 84, 0.2),
-      0 2px 8px rgba(0, 0, 0, 0.2);
-  }
-  80% {
-    box-shadow:
-      0 -8px 14px rgba(1, 60, 84, 0.55),
-      0 0 22px rgba(1, 60, 84, 0.2),
-      0 2px 8px rgba(0, 0, 0, 0.2);
-  }
-  100% {
-    box-shadow:
-      0 0 18px rgba(1, 60, 84, 0.75),
-      0 0 28px rgba(1, 60, 84, 0.4),
-      0 2px 8px rgba(0, 0, 0, 0.2);
+  0%   { box-shadow:  0.0px -3.0px 6px rgba(1,60,84,0.22), 0 0 3px rgba(1,60,84,0.07); }
+  5%   { box-shadow:  0.9px -2.9px 6px rgba(1,60,84,0.22), 0 0 3px rgba(1,60,84,0.07); }
+  10%  { box-shadow:  1.8px -2.4px 6px rgba(1,60,84,0.22), 0 0 3px rgba(1,60,84,0.07); }
+  15%  { box-shadow:  2.4px -1.8px 6px rgba(1,60,84,0.22), 0 0 3px rgba(1,60,84,0.07); }
+  20%  { box-shadow:  2.9px -0.9px 6px rgba(1,60,84,0.22), 0 0 3px rgba(1,60,84,0.07); }
+  25%  { box-shadow:  3.0px  0.0px 6px rgba(1,60,84,0.22), 0 0 3px rgba(1,60,84,0.07); }
+  30%  { box-shadow:  2.9px  0.9px 6px rgba(1,60,84,0.22), 0 0 3px rgba(1,60,84,0.07); }
+  35%  { box-shadow:  2.4px  1.8px 6px rgba(1,60,84,0.22), 0 0 3px rgba(1,60,84,0.07); }
+  40%  { box-shadow:  1.8px  2.4px 6px rgba(1,60,84,0.22), 0 0 3px rgba(1,60,84,0.07); }
+  45%  { box-shadow:  0.9px  2.9px 6px rgba(1,60,84,0.22), 0 0 3px rgba(1,60,84,0.07); }
+  50%  { box-shadow:  0.0px  3.0px 6px rgba(1,60,84,0.22), 0 0 3px rgba(1,60,84,0.07); }
+  55%  { box-shadow: -0.9px  2.9px 6px rgba(1,60,84,0.22), 0 0 3px rgba(1,60,84,0.07); }
+  60%  { box-shadow: -1.8px  2.4px 6px rgba(1,60,84,0.22), 0 0 3px rgba(1,60,84,0.07); }
+  65%  { box-shadow: -2.4px  1.8px 6px rgba(1,60,84,0.22), 0 0 3px rgba(1,60,84,0.07); }
+  70%  { box-shadow: -2.9px  0.9px 6px rgba(1,60,84,0.22), 0 0 3px rgba(1,60,84,0.07); }
+  75%  { box-shadow: -3.0px  0.0px 6px rgba(1,60,84,0.22), 0 0 3px rgba(1,60,84,0.07); }
+  80%  { box-shadow: -2.9px -0.9px 6px rgba(1,60,84,0.22), 0 0 3px rgba(1,60,84,0.07); }
+  85%  { box-shadow: -2.4px -1.8px 6px rgba(1,60,84,0.22), 0 0 3px rgba(1,60,84,0.07); }
+  90%  { box-shadow: -1.8px -2.4px 6px rgba(1,60,84,0.22), 0 0 3px rgba(1,60,84,0.07); }
+  95%  { box-shadow: -0.9px -2.9px 6px rgba(1,60,84,0.22), 0 0 3px rgba(1,60,84,0.07); }
+  100% { box-shadow:  0.0px -3.0px 6px rgba(1,60,84,0.22), 0 0 3px rgba(1,60,84,0.07); }
+}
+
+@keyframes assistant-panel-open {
+  from {
+    opacity: 0;
+    transform: scaleY(0.92) translateY(-6px);
+  }
+  to {
+    opacity: 1;
+    transform: scaleY(1) translateY(0);
   }
 }
 
+@keyframes assistant-panel-close {
+  from {
+    opacity: 1;
+    transform: scaleY(1) translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: scaleY(0.92) translateY(-6px);
+  }
+}
+
+.assistant-container {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
 .assistant-bubble {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 100%;
-  height: 100%;
-  transition: opacity 0.15s ease-out;
+  width: 2.25rem;
+  height: 2.25rem;
+  padding: 0;
+  border: 2px solid rgba(1, 60, 84, 0.5);
+  border-radius: 50%;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  opacity: 0.85;
+  transition:
+    border-color 0.2s ease,
+    opacity 0.2s ease;
+
+  &:hover,
+  &--active {
+    opacity: 1;
+    border-color: #013c54;
+    animation: assistant-aurora-halo 0.34s linear 1 forwards;
+  }
 
   .ui.icon {
     margin: 0;
-    font-size: 1.5rem;
+    font-size: 1.15rem;
   }
 
   &__logo {
     display: block;
-    width: 70%;
-    height: 70%;
+    width: 1.5rem;
+    height: 1.5rem;
     object-fit: contain;
   }
 }
 
+.assistant-panel {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  width: 33vw;
+  min-width: 400px;
+  height: 80vh;
+  display: flex;
+  flex-direction: column;
+  background: #fff;
+  border-radius: 0 0 1rem 1rem;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
+  z-index: 1000;
+  overflow: hidden;
+  transform-origin: top right;
+  animation: assistant-panel-open 0.2s ease-out forwards;
+
+  &--closing {
+    animation: assistant-panel-close 0.2s ease-in forwards;
+  }
+}
+
 .assistant-chat {
   display: flex;
   flex-direction: column;
   width: 100%;
   height: 100%;
 
-  &__actions {
+  &__header {
     display: flex;
     flex-shrink: 0;
     align-items: center;
-    justify-content: space-between;
     gap: 0.5rem;
-    padding: 0.75rem 1rem;
+    padding: 0.6rem 1rem;
     background: #013c54;
     color: #fff;
+    border-radius: 1rem 1rem 0 0;
+  }
+
+  &__header-title {
+    flex: 1;
+    font-size: 0.875rem;
+    font-weight: 600;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &__actions {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.4rem 0.75rem;
+    background: #f4f6f8;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
   }
 
   &__action {
     display: inline-flex;
     align-items: center;
-    gap: 0.35rem;
-    padding: 0;
-    border: none;
-    border-radius: 0.25rem;
+    gap: 0.3rem;
+    padding: 0.25rem 0.6rem;
+    border: 1px solid rgba(1, 60, 84, 0.25);
+    border-radius: 0.4rem;
     background: transparent;
-    color: inherit;
-    font-size: 0.875rem;
+    color: #013c54;
+    font-size: 0.775rem;
     cursor: pointer;
+    transition: background 0.15s ease;
+
+    &:hover {
+      background: rgba(1, 60, 84, 0.07);
+    }
 
     .ui.icon {
       margin: 0;
-      font-size: 1.35rem;
+      font-size: 1rem;
       display: flex;
       align-items: center;
       justify-content: center;
-      width: 1.5rem;
-      height: 1.5rem;
-    }
-
-    &--new-chat {
-      font-weight: 600;
-      cursor: default;
+      width: 1rem;
+      height: 1rem;
     }
 
     &--close {
-      margin-left: auto;
       padding: 0.25rem;
       width: 2rem;
       height: 2rem;
+      border: none;
       border-radius: 999px;
       background: transparent;
+      color: #fff;
 
       &:hover,
       &:focus,
       &:active {
-        background: transparent;
+        background: rgba(255, 255, 255, 0.15);
+      }
+
+      .ui.icon {
+        font-size: 1.1rem;
+        width: 1.1rem;
+        height: 1.1rem;
       }
     }
   }
@@ -434,8 +453,150 @@
     text-align: center;
   }
 }
+.ai-assistant-page {
+  display: flex;
+  flex-direction: row;
+  height: calc(100vh - 7rem);
+  max-width: 1200px;
+  margin: 0 auto;
+  overflow: hidden;
+  gap: 0;
+}
 
-// ── thinking sections ─────────────────────────────────────────────────────────
+.ai-conversation-list {
+  display: flex;
+  flex-direction: column;
+  width: 240px;
+  min-width: 240px;
+  border-right: 1px solid rgba(0, 0, 0, 0.08);
+  background: #f7f9fa;
+  overflow: hidden;
+
+  &__header {
+    flex-shrink: 0;
+    padding: 0.75rem;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+  }
+
+  &__new {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    width: 100%;
+    padding: 0.4rem 0.6rem;
+    border: 1px solid rgba(1, 60, 84, 0.3);
+    border-radius: 0.5rem;
+    background: transparent;
+    color: #013c54;
+    font-size: 0.8125rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background 0.15s ease;
+
+    .ui.icon {
+      margin: 0;
+    }
+
+    &:hover {
+      background: rgba(1, 60, 84, 0.07);
+    }
+  }
+
+  &__items {
+    flex: 1;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    padding: 0.5rem 0;
+  }
+
+  &__item {
+    display: flex;
+    flex-direction: column;
+    gap: 0.2rem;
+    width: 100%;
+    padding: 0.5rem 0.75rem;
+    border: none;
+    background: transparent;
+    text-align: left;
+    cursor: pointer;
+    transition: background 0.12s ease;
+
+    &:hover {
+      background: rgba(1, 60, 84, 0.06);
+    }
+
+    &--active {
+      background: rgba(1, 60, 84, 0.1);
+
+      &:hover {
+        background: rgba(1, 60, 84, 0.13);
+      }
+    }
+  }
+
+  &__item-preview {
+    font-size: 0.8rem;
+    color: #333;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    line-height: 1.3;
+  }
+
+  &__item-date {
+    font-size: 0.7rem;
+    color: #999;
+  }
+}
+
+.ai-assistant-main {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+
+  &__toolbar {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding: 0.4rem 0.75rem;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
+    background: #fff;
+  }
+
+  &__continue {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    padding: 0.3rem 0.7rem;
+    border: 1px solid rgba(1, 60, 84, 0.3);
+    border-radius: 0.5rem;
+    background: transparent;
+    color: #013c54;
+    font-size: 0.8125rem;
+    cursor: pointer;
+    transition: background 0.15s ease;
+
+    .ui.icon {
+      margin: 0;
+    }
+
+    &:hover {
+      background: rgba(1, 60, 84, 0.07);
+    }
+  }
+}
+
+.ai-assistant-chat {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
 
 .thinking-block {
   align-self: stretch;
@@ -516,7 +677,6 @@
       border-left: 2px solid rgba(1, 60, 84, 0.2);
     }
 
-    /* Same layout as --2 (rallita + sangría); text and rail in red. */
     &--3 {
       font-size: 0.75rem;
       color: #9b1c1c;
@@ -535,4 +695,4 @@
       opacity: 0.65;
     }
   }
-}
+}

package/src/components/assistant/AssistantBubble.js

@@ -1,56 +0,0 @@
-import PropTypes from "prop-types";
-import { useIntl } from "react-intl";
-import { Icon } from "semantic-ui-react";
-import truedatLogo from "assets/truedat-logo-home-no-text.png";
-
-const AssistantBubble = ({ onClick, fadeOut, fadeIn }) => {
-  const { formatMessage } = useIntl();
-  const className = [
-    "assistant-bubble",
-    fadeOut && "assistant-content--fade-out",
-    fadeIn && "assistant-content--fade-in",
-  ]
-    .filter(Boolean)
-    .join(" ");
-
-  const isLogoSrcString = typeof truedatLogo === "string";
-
-  return (
-    <div
-      className={className}
-      role="button"
-      aria-label={formatMessage({ id: "assistant.bubble.label" })}
-      onClick={onClick}
-      onKeyDown={(e) => {
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          onClick();
-        }
-      }}
-      tabIndex={0}
-    >
-      {isLogoSrcString ? (
-        <img
-          src={truedatLogo}
-          alt={formatMessage({ id: "assistant.bubble.label" })}
-          className="assistant-bubble__logo"
-        />
-      ) : (
-        <Icon name="comments" />
-      )}
-    </div>
-  );
-};
-
-AssistantBubble.propTypes = {
-  onClick: PropTypes.func.isRequired,
-  fadeOut: PropTypes.bool,
-  fadeIn: PropTypes.bool,
-};
-
-AssistantBubble.defaultProps = {
-  fadeOut: false,
-  fadeIn: false,
-};
-
-export default AssistantBubble;

package/src/components/assistant/__tests__/AssistantBubble.spec.js

@@ -1,14 +0,0 @@
-import React from "react";
-import { render, waitForLoad } from "@truedat/test/render";
-
-import AssistantBubble from "../AssistantBubble";
-
-describe("<AssistantBubble />", () => {
-  it("matches the latest snapshot", async () => {
-    const rendered = render(
-      <AssistantBubble onClick={jest.fn()} />
-    );
-    await waitForLoad(rendered);
-    expect(rendered.container).toMatchSnapshot();
-  });
-});

package/src/components/assistant/__tests__/__snapshots__/AssistantBubble.spec.js.snap

@@ -1,17 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<AssistantBubble /> matches the latest snapshot 1`] = `
-<div>
-  <div
-    aria-label="assistant.bubble.label"
-    class="assistant-bubble"
-    role="button"
-    tabindex="0"
-  >
-    <i
-      aria-hidden="true"
-      class="comments icon"
-    />
-  </div>
-</div>
-`;