@memori.ai/memori-react 6.8.1 → 6.8.4

package/esm/components/ChatHistoryDrawer/ChatHistory.css

@@ -0,0 +1,414 @@
+.memori-chat-history-drawer--card {
+    max-height: 60vh;
+    border: 1px solid var(--memori-border);
+    border-radius: 0.75rem;
+    overflow-y: auto;
+    transition: all 0.2s ease-in-out;
+}
+
+.memori-chat-history-drawer--card--hoverable:hover {
+    border-color: var(--memori-primary-light);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+.memori-chat-history-drawer--content {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+.memori-chat-history-drawer--toolbar--min-messages-filter{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.memori-chat-history-drawer--toolbar--min-messages-filter--select{
+    width: 100%;
+    min-width: 240px;
+}
+
+.memori-chat-history-drawer--toolbar--min-messages-filter--input-number{
+    position: relative;
+    width: 100%;
+    max-width: 60px;
+    min-height: 32px;
+    /* padding-top: 0.5rem;
+    padding-right: 2.5rem;
+    padding-bottom: 0.5rem;
+    padding-left: 0.75rem; */
+    border: 1px solid #e5e7eb;
+    border-radius: 0.5rem;
+    background: transparent;
+    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px,
+        rgba(0, 0, 0, 0.1) 0px 2px 4px -2px;
+    color: var(--memori-text-color, #333);
+    cursor: pointer;
+    font-family: var(--memori-font-family);
+    font-size: 16px;
+    text-align: left;
+}
+
+.memori-chat-history-drawer--card--header {
+    position: sticky;
+    z-index: 100;
+    top: 0px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 0px;
+    border-radius: 0.75rem 0.75rem 0 0;
+    background-color: #ffffff;
+    gap: 1rem;
+}
+
+.memori-chat-history-drawer--card--header--content {
+    display: flex;
+    width: 100%;
+    flex-direction: row;
+    align-items: center;
+    gap: 1rem;
+}
+
+.memori-chat-history-drawer--card--header--info {
+    display: flex;
+    width: 100%;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+}
+
+.memori-chat-history-drawer--card--header--icon-wrapper {
+    display: flex;
+    width: 2rem;
+    height: 2rem;
+    align-items: center;
+    justify-content: center;
+    border-radius: 0.5rem;
+    background-color: var(--memori-primary-light);
+    transition: all 0.2s ease-in-out;
+}
+
+.memori-chat-history-drawer--card--hoverable:hover .memori-chat-history-drawer--card--header--icon-wrapper {
+    transform: scale(1.05);
+}
+
+.memori-chat-history-drawer--card--header--icon {
+    color: var(--memori-primary);
+}
+
+.memori-chat-history-drawer--card--header--title-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.memori-chat-history-drawer--card--header--title {
+    margin: 0;
+    color: var(--memori-color-text);
+    font-weight: 600;
+}
+
+.memori-chat-history-drawer--card--header--badge {
+    padding: 0.25rem 0.5rem;
+    border-radius: 9999px;
+    background-color: var(--memori-primary-light);
+    color: var(--memori-primary);
+    font-size: 0.75rem;
+    font-weight: 500;
+    letter-spacing: 0.025em;
+}
+
+.memori-chat-history-drawer--card--header--meta {
+    display: flex;
+    align-items: center;
+    margin-top: 0.25rem;
+    color: var(--memori-color-text-secondary);
+    font-size: 0.875rem;
+    gap: 1rem;
+}
+
+.memori-chat-history-drawer--card--header--meta--messages,
+.memori-chat-history-drawer--card--header--meta--time {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+}
+
+.memori-chat-history-drawer--card--content {
+    position: relative;
+    display: flex;
+    height: 100%;
+    flex-direction: column;
+}
+
+.memori-chat-history-drawer--card--content--header {
+    position: absolute;
+    z-index: 10;
+    right: 12px;
+}
+
+.memori-chat-history-drawer--card--content--export-button {
+    display: flex;
+    align-items: center;
+    padding: 8px;
+    border: none;
+    background: transparent;
+    color: var(--memori-primary);
+    cursor: pointer;
+    gap: 8px;
+    transition: color 0.2s ease;
+}
+
+.memori-chat-history-drawer--card--content--export-button:hover {
+    color: var(--memori-primary);
+}
+
+.memori-chat-history-drawer--card--content--export-button:disabled {
+    background-color: transparent;
+}
+
+.memori-chat-history-drawer--card--content--export-button--content {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.memori-chat-history-drawer--card--content--export-button--icon {
+    width: 18px;
+    height: 18px;
+    fill: var(--memori-primary);
+}
+
+.memori-chat-history-drawer--toolbar--actions > div > ul {
+    z-index: 10;
+    right: 0.25rem;
+    margin-left: auto;
+}
+
+.memori-chat-history-drawer--card--content--messages {
+    flex: 1;
+    padding: 16px;
+    overflow-y: auto;
+}
+
+.memori-chat-history-drawer--card--content--messages .memori-chat--cover {
+    display: none;
+}
+.memori-chat-history-drawer--card--content--messages .memori-chat--content {
+    padding: 0 !important;
+    mask-image: none !important;
+}
+
+.memori-chat-history-drawer--card--content--messages--user {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    gap: 1rem;
+}
+
+.memori-chat-history-drawer--card--content--messages--assistant {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    gap: 1rem;
+}
+
+.memori-chat-history-drawer--card--content--actions {
+    position: sticky;
+    z-index: 10;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    justify-content: center;
+    padding: 16px;
+    background: linear-gradient(to top, var(--memori-background-color, #fff) 80%, transparent);
+}
+
+.memori-chat-history-drawer--card--content--resume-button {
+    display: flex;
+    min-width: 200px;
+    align-items: center;
+    justify-content: center;
+    padding: 12px 24px;
+    border-radius: 24px;
+    gap: 8px;
+    transition: transform 0.2s ease;
+}
+
+.memori-chat-history-drawer--card--content--resume-button:hover {
+    transform: translateY(-2px);
+}
+
+.memori-chat-history-drawer--card--content--resume-button--content {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.memori-chat-history-drawer--card--content--resume-button--icon {
+    width: 20px;
+    height: 20px;
+}
+
+/* Loading state */
+.memori-chat-history-drawer--loading {
+    display: flex;
+    min-height: 80px;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+    overflow-y: hidden;
+}
+
+.memori-chat-history-drawer--loading > div {
+    overflow-y: hidden !important;
+}
+
+.memori-chat-history-drawer--loading--spinner {
+    min-height: 80px !important;
+}
+
+.memori-chat-history-drawer--loading--text {
+    margin-top: 1rem;
+    color: var(--memori-color-text-secondary);
+}
+
+.memori-chat-history-drawer--card--header--meta--icon {
+    width: 1.25rem;
+    height: 1.25rem;
+    color: var(--memori-color-text-secondary);
+}
+/* Empty state */
+.memori-chat-history-drawer--empty {
+    padding: 3rem 0;
+    text-align: center;
+}
+
+.memori-chat-history-drawer--empty--icon {
+    width: 3rem;
+    height: 3rem;
+    margin: 0 auto;
+    color: var(--memori-color-text-secondary);
+}
+
+.memori-chat-history-drawer--empty--text {
+    margin-top: 1rem;
+    color: var(--memori-color-text-secondary);
+}
+
+/* Error state */
+.memori-chat-history-drawer--error {
+    padding: 1rem;
+    border-radius: 0.5rem;
+    background-color: var(--memori-color-error-light);
+    color: var(--memori-color-error);
+}
+
+/* No results state */
+.memori-chat-history-drawer--no-results {
+    padding: 3rem 0;
+    color: var(--memori-color-text-secondary);
+    text-align: center;
+}
+
+/* Toolbar */
+.memori-chat-history-drawer--toolbar {
+    display: flex;
+    margin-bottom: 1.5rem;
+    margin-left: auto;
+    gap: 1rem;
+}
+
+.memori-chat-history-drawer--toolbar--search {
+    position: relative;
+    flex: 1;
+}
+
+.memori-chat-history-drawer--toolbar--search--input {
+    width: 100%;
+    padding: 0.5rem 1rem 0.5rem 2.5rem;
+    border: 1px solid var(--memori-border);
+    border-radius: 0.5rem;
+}
+
+.memori-chat-history-drawer--toolbar--search--input:focus {
+    border-color: var(--memori-primary);
+    box-shadow: 0 0 0 2px var(--memori-primary-light);
+    outline: none;
+}
+
+.memori-chat-history-drawer--toolbar--search--icon {
+    position: absolute;
+    top: 50%;
+    left: 0.75rem;
+    color: var(--memori-color-text-secondary);
+    transform: translateY(-50%);
+}
+
+.memori-chat-history-drawer--toolbar--search--icon svg {
+    width: 1.25rem;
+    height: 1.25rem;
+}
+
+.memori-chat-history-drawer--toolbar--sort-button {
+    background-color: #fff;
+    color: var(--memori-primary);
+    white-space: nowrap;
+}
+
+.memori-chat-history-drawer--toolbar--sort-button--icon {
+    width: 1.25rem;
+    height: 1.25rem;
+    margin-right: 0.5rem;
+    font-size: 1.25rem;
+    transition: transform 0.2s ease-in-out;
+}
+
+.memori-chat-history-drawer--toolbar--sort-button--icon.rotate-180 {
+    transform: scaleY(-1);
+}
+
+/* Pagination */
+.memori-chat-history-drawer--pagination {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 1.5rem;
+}
+
+.memori-chat-history-drawer--pagination--button {
+    width: 6rem;
+}
+
+.memori-chat-history-drawer--pagination--info {
+    color: var(--memori-primary);
+    font-size: 0.875rem;
+}
+
+/* Card selected state */
+.memori-chat-history-drawer--card--selected {
+    border-color: var(--memori-primary);
+    box-shadow: 0 0 0 2px var(--memori-primary-light);
+}
+
+/* Card disabled state */
+.memori-chat-history-drawer--card--disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+}
+
+.memori-chat-history-drawer--download-button-wrapper{
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.memori-chat-history-drawer--download-button-wrapper--text{
+    color: var(--memori-primary);
+    font-size: 0.875rem;
+    font-weight: 500;
+}

package/esm/components/ChatHistoryDrawer/ChatHistory.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import memoriApiClient from '@memori.ai/memori-api-client';
+import { ChatLog, Memori, Message } from '@memori.ai/memori-api-client/dist/types';
+export interface Props {
+    open: boolean;
+    onClose: () => void;
+    apiClient: ReturnType<typeof memoriApiClient>;
+    sessionId: string;
+    memori: Memori;
+    resumeSession: (chatLog: ChatLog) => void;
+    baseUrl: string;
+    apiUrl: string;
+    history: Message[];
+    loginToken?: string;
+    language: string;
+    userLang: string;
+    isMultilanguageEnabled?: boolean;
+}
+declare const ChatHistoryDrawer: ({ open, onClose, apiClient, sessionId, memori, resumeSession, baseUrl, apiUrl, history, loginToken, language, userLang, isMultilanguageEnabled, }: Props) => JSX.Element;
+export default ChatHistoryDrawer;