graphdb-workbench 2.8.0-Test → 2.8.0

package/dist/css/ttyg/agent-select-menu.css

@@ -20,6 +20,7 @@
     width: auto;
     background-color: #fff;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    max-width: 30vw;
 }
 
 .agent-select-menu .dropdown-menu li {
@@ -38,10 +39,43 @@
 
 .agent-select-menu .dropdown-menu li a {
     text-decoration: none;
-    display: block;
 }
 
-.agent-select-menu .agent-name {
+.agent-select-menu .agent-option,
+.agent-select-menu .selected-agent-option {
+    display: flex;
+    overflow: hidden;
+    align-items: center;
+    gap: 0.2em;
+    width: 100%;
+}
+
+.agent-select-menu .agent-option .agent-name,
+.agent-select-menu .agent-option .repository-id {
     color: var(--secondary-color);
     font-weight: 400;
 }
+
+.agent-select-menu .agent-option .agent-name,
+.agent-select-menu .agent-option .repository-id,
+.agent-select-menu .selected-agent-option .agent-name,
+.agent-select-menu .selected-agent-option .repository-id {
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+.agent-select-menu .agent-option .agent-name,
+.agent-select-menu .selected-agent-option .agent-name {
+    flex: 0 1 auto;
+}
+
+.agent-select-menu .agent-option .repository-id,
+.agent-select-menu .selected-agent-option .repository-id {
+    flex: 0 1 50%;
+    text-align: left;
+}
+
+.agent-select-menu .agent-option .agent-with-deleted-repository,
+.agent-select-menu .selected-agent-option .agent-with-deleted-repository{
+    flex: 0 1 auto;
+}

package/dist/css/ttyg/agent-settings-modal.css

@@ -1,71 +1,125 @@
 :root {
     --field-label-weight: 500;
+    --error-color: #FA787E;
+    --warning-color: #8a6d3b;
 }
 
-.agent-settings-form label {
+.agent-settings-modal .modal-footer {
+    display: flex;
+    justify-content: space-between;
+}
+
+.agent-settings-modal .modal-footer > div {
+    flex-grow: 1;
+}
+
+.agent-settings-modal .modal-footer .creating-agent-loader {
+    display: inline-block;
+    position: relative;
+    bottom: -3px;
+}
+
+.agent-settings-modal .agent-settings-form label {
     font-weight: var(--field-label-weight);
 }
 
-.agent-settings-form .extraction-methods {
+.agent-settings-modal .agent-settings-form [type="checkbox"],
+.agent-settings-modal .agent-settings-form [type="checkbox"] + label {
+    cursor: pointer;
+}
+
+.agent-settings-modal .agent-settings-form .extraction-methods {
     display: flex;
     flex-direction: column;
 }
 
-.agent-settings-form .has-error {
-    outline: 1px solid #FA787E;
+.agent-settings-modal .agent-settings-form .has-error {
+    outline: 1px solid var(--error-color);
 }
 
-.agent-settings-form .extraction-methods .extraction-method-heading {
+.agent-settings-modal .agent-settings-form .has-warning {
+    outline: 2px solid var(--warning-color);
+}
+
+.agent-settings-modal .agent-settings-form .extraction-methods .extraction-method-heading {
     display: flex;
     align-items: center;
 }
 
-.agent-settings-form .extraction-methods .extraction-method-heading .panel-toggle-link {
+.agent-settings-modal .agent-settings-form .extraction-methods .extraction-method-heading .panel-toggle-link {
     display: flex;
     flex-grow: 1;
     justify-content: space-between;
 }
 
-.agent-settings-form .extraction-methods .extraction-method-heading .panel-toggle-link .toggle-icon {
-    transition: transform 0.3s ease;
-}
-
-.agent-settings-form .extraction-methods .extraction-method-heading .panel-toggle-link.collapsed .toggle-icon {
-    transform: rotate(0deg);
-}
-
-.agent-settings-form .extraction-methods .extraction-method-heading .panel-toggle-link .toggle-icon {
-    transform: rotate(180deg);
-}
-
 .agent-settings-form .extraction-methods .extraction-method-heading.selected .panel-toggle-link {
     font-weight: var(--field-label-weight);
 }
 
-.agent-settings-form .extraction-methods .extraction-method {
+.agent-settings-modal .agent-settings-form .extraction-methods .extraction-method {
     padding: 0 10px;
     margin-bottom: 2px;
 }
 
-.agent-settings-form .extraction-methods .extraction-method .extraction-method-options {
+.agent-settings-modal .agent-settings-form .extraction-methods .extraction-method .extraction-method-options {
     padding: 1rem 1rem 1rem 3.6rem;
 }
 
-/* when the panel is expanded */
-.agent-settings-form .extraction-methods .extraction-method:has(.extraction-method-content.in) {
-    background-color: #f9fafb;
+.agent-settings-modal .agent-settings-form .extraction-methods .extraction-method .extraction-method-options .radio-inline {
+    cursor: pointer;
 }
 
-.agent-settings-form .additional-extraction-methods .additional-extraction-method {
+.agent-settings-modal .agent-settings-form .additional-extraction-methods .additional-extraction-method {
     padding: 0 10px;
 }
 
-.agent-settings-form input[type="range"] {
+.agent-settings-modal .agent-settings-form #sparqlQuery,
+.agent-settings-modal .agent-settings-form #queryTemplate {
+    font-size: 1rem;
+    font-family: var(--mono-font) !important;
+}
+
+.agent-settings-modal .agent-settings-form #fts_search_maxNumberOfTriplesPerCall,
+.agent-settings-modal .agent-settings-form #similarity_search_maxNumberOfTriplesPerCall,
+.agent-settings-modal .agent-settings-form #retrieval_search_maxNumberOfTriplesPerCall {
+    width: 30%
+}
+
+.agent-settings-modal .agent-settings-form input[type="range"] {
     width: 100%
 }
 
-.agent-settings-form [type="range"] {
+.agent-settings-modal .agent-settings-form [type="range"] {
     position: relative;
     /* move the slider up next to the related input field to match the mockup */
     top: -6px;
+    accent-color: var(--secondary-color);
+}
+
+.agent-settings-form .panel-toggle-link .toggle-icon {
+    transition: transform 0.3s ease; /* Smooth transition */
+}
+
+.agent-settings-form .advanced-settings .toolbar,
+.user-instructions .toolbar {
+    display: flex;
+    justify-content: space-between;
+}
+
+.agent-settings-form .advanced-settings .toolbar .copy-btn,
+.user-instructions .toolbar .copy-btn {
+    color: var(--primary-color);
+    border: none;
+    background-color: transparent;
+    cursor: pointer;
+    padding: 0;
+}
+
+.extraction-method .panel-toggle-link .toggle-icon.expanded {
+    transform: rotate(180deg);
+}
+
+/* when the panel is expanded */
+.agent-settings-form .extraction-methods .extraction-method:has(.expanded) {
+    background-color: var(--base-background-color);
 }

package/dist/css/ttyg/chat-item-details.css

@@ -0,0 +1,158 @@
+:root {
+    --border: 1px solid #C2C1C2;
+    --assistan-icon-weight: 2.5rem;
+    --assistant-container-gap: 1rem;
+}
+
+.chat-detail .assistant {
+    display: flex;
+    gap: var(--assistant-container-gap);
+}
+
+.chat-detail .assistant-message {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    flex-grow: 1;
+    width: calc(100% - var(--assistan-icon-weight) - var(--assistant-container-gap));
+}
+
+.chat-detail .assistant-message .answer {
+    line-height: var(--line-height);
+}
+
+.chat-detail .assistant-message .answer img {
+    max-width: 100%;
+    height: auto;
+    vertical-align: top;
+}
+
+.chat-detail .assistant-icon {
+    width: var(--assistan-icon-weight);
+    height: var(--assistan-icon-weight);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0.625rem;
+}
+
+.chat-detail .assistant-message .hidden-actions {
+    opacity: 0;
+}
+
+.chat-detail .assistant-message:hover .actions {
+    opacity: 1;
+}
+
+.chat-detail .assistant-message .toggle-explain-response-icon {
+    transform: rotate(180deg);
+    font-size: 0.6rem;
+}
+
+.chat-detail .assistant-message .toggle-explain-response-icon.expanded {
+    transform: rotate(0deg);
+}
+
+.chat-detail .assistant-message .actions {
+}
+
+.chat-detail .assistant-message .derived-answer-hint {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.5rem;
+    margin-top: -0.5rem;
+}
+
+.chat-detail .assistant-message .deliver-answer-btn {
+    padding: 0.375rem 0.75rem;
+}
+
+.chat-detail .assistant-message .explain-response-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.chat-detail .assistant-message .explain-responses {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+/* Better handling of markdown-derived HTML inside the assistant message */
+.chat-detail .assistant-message li > p:has(+:not(p, div)),
+.chat-detail .assistant-message p:last-child {
+    margin-bottom: 0;
+}
+
+.chat-detail .assistant-message pre {
+    text-wrap: wrap;
+    font-variant-ligatures: none;
+}
+
+.chat-detail .explain-response {
+    display: flex;
+    flex-direction: column;
+}
+
+.chat-detail .explain-response .raw-query {
+    display: flex;
+    gap: 0.625rem;
+    margin: 0 !important;
+    align-items: center;
+    white-space: nowrap;
+    padding: 0 1rem 1rem 1rem;
+}
+
+.chat-detail .explain-response .raw-query .label,
+.chat-detail .explain-response .raw-query .copy-to-clipboard-btn {
+    flex-shrink: 0;
+}
+
+.chat-detail .explain-response .raw-query .content {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.chat-detail .explain-response .label {
+    color: #1E293B;
+    font-weight: 400;
+}
+
+.chat-detail .explain-response .explain-call .header {
+    display: flex;
+    justify-content: space-between;
+    background-color: #F3F3F3;
+    padding: 0.25rem 0.25rem;
+}
+
+.chat-detail .explain-response .explain-call {
+    border: var(--border);
+}
+
+.chat-detail .explain-response .explain-call .query {
+    padding: 1rem 1rem 0 1rem;
+}
+
+.chat-detail .explain-response .error-message {
+    margin: 0 1rem 1rem 1rem;
+}
+
+.chat-detail .explain-response .error-message .error-header {
+    display: flex;
+    gap: 0.625rem;
+    align-items: center;
+    white-space: nowrap;
+    justify-content: space-between;
+}
+
+.chat-detail .explain-response .error-content {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    max-height: 4.5rem; /* fallback if line-clamp doesn't work */
+}

package/dist/css/ttyg/chat-list.css

@@ -1,9 +1,17 @@
 .chat-list-component {
     padding: 0 8px;
+    height: 100%;
+    clip: rect(0, auto, auto, 0);
+    overflow-y: hidden;
+    scrollbar-gutter: stable;
+}
+
+.chat-list-component:hover {
+    overflow-y: auto;
 }
 
 .chat-list-component .chat-group label {
-    color: #aaa;
+    color: var(--gray-color-dark);
 }
 
 .chat-list-component .chat-group ul {
@@ -11,23 +19,33 @@
     padding-inline-start: 0;
 }
 
-.chat-list-component .chat-item {
+.chat-list-component .chat-item .chat-detail {
     padding: 6px 4px;
     display: flex;
     justify-content: space-between;
     width: 100%;
 }
 
+.chat-list-component .chat-item .deleting-chat-loader {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 60px;
+    padding: 6px 8px;
+    background-color: #00000066;
+    color: #fff;
+}
+
 .chat-list-component .chat-item .form-control {
     padding: 4px 8px;
 }
 
 .chat-list-component .chat-item.selected {
-    background-color: #ddd;
+    background-color: var(--base-background-selected-color);
 }
 
 .chat-list-component .chat-item:not(.edited):hover {
-    background-color: #ddd;
+    background-color: var(--base-background-hover-color);
     cursor: pointer;
 }
 

package/dist/css/ttyg/chat-panel.css

@@ -8,27 +8,41 @@
     flex-direction: column;
     justify-content: space-between;
     color: var(--text-color);
+    clip: rect(0, auto, auto, 0);
 }
 
-.chat-panel .btn-link:focus {
-    color: var(--text-color);
+.chat-panel.no-content {
+    justify-content: center;
+    align-items: center;
+    height: inherit !important;
 }
 
-.chat-panel .btn-link:not(:hover) {
-    color: var(--text-color);
+.chat-panel .chat-details {
+    display: flex;
+    flex-direction: column;
+    gap: var(--message-gap);
+    overflow-y: hidden;
+    scrollbar-gutter: stable;
+    /*
+    space for scroll gutters - we don't want them inside the chat
+    */
+    padding-left: 1rem;
+    padding-right: 1rem;
 }
 
-.chat-panel .chat-details {
+.chat-panel:hover .chat-details {
     overflow-y: auto;
-    padding-right: 30px;
-    padding-left: 20px;
+}
+
+.chat-panel .chat-details > div:last-child {
+    /* bigger space just before the ask input and button */
+    padding-bottom: 3rem;
 }
 
 .chat-panel .chat-detail {
     display: flex;
     flex-direction: column;
-    gap: 16px;
-    padding: 16px 0 40px;
+    gap: var(--message-gap);
 }
 
 .chat-panel .user-message {
@@ -38,108 +52,95 @@
     color: var(--text-color);
 }
 
-.chat-panel .assistant {
-    display: flex;
-    gap: 16px;
-}
-
 .chat-panel .actions {
     display: flex;
-    gap: 10px;
-}
-
-.chat-panel .assistant-message {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-}
-
-.chat-panel .assistant-message .answer {
-    padding: 4px 8px;
-    line-height: var(--line-height);
+    gap: 0.625rem;
 }
 
 .chat-panel .user-message .question {
     max-width: 70%;
-    padding: 8px 16px;
+    padding: 0.5rem 1rem;
     color: var(--text-color);
     line-height: var(--line-height);
 }
 
-.chat-panel .assistant-icon {
-    width: 40px;
-    height: 40px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 10px;
-}
-
 .chat-panel .messages-hint {
-    font-size: 2em;
-    padding-top: 2em;
+    padding-top: 1rem;
     text-align: center;
 }
 
-.chat-panel .assistant-message .hidden-actions {
-    opacity: 0
+.chat-panel .messages-hint .hint1 {
+    font-size: 2rem;
+    transform:scale(1, 0.8);
 }
 
-.chat-panel .assistant-message .toggle-explain-response-icon {
-    transform: rotate(180deg);
-    font-size: 0.6rem;
+.chat-panel .messages-hint .hint1 .graph,
+.chat-panel .messages-hint .hint1 .wise {
+    animation-duration: 3.0s;
+    animation-delay: 1s;
+    animation-iteration-count: infinite;
+    animation-timing-function: ease-out;
 }
 
-.chat-panel .assistant-message .toggle-explain-response-icon.expanded {
-    transform: rotate(0deg);
+.chat-panel .messages-hint .hint1 .graph {
+    font-weight: 500;
+    animation-name: change-color-graph;
 }
 
-.chat-panel .assistant-message .actions:hover {
-    opacity: 1;
+.chat-panel .messages-hint .hint1 .wise {
+    animation-name: change-color-wise;
 }
 
-.chat-panel .assistant-message .actions {
-    padding-left: 6px;
+.chat-panel .messages-hint .hint1 .thrives {
+    font-size: 0.425em;
+    font-weight: 400;
 }
 
-.chat-panel .new-question {
-    width: 100%;
+@keyframes change-color-graph {
+    0% {
+        color: var(--graphwise-blue-color);
+    }
+    40% {
+        color: inherit;
+    }
+    100% {
+        color: inherit;
+    }
 }
 
-.chat-panel .new-question .question-input {
-    background-color: #EFF3F8;
-    color: var(--text-color);
+@keyframes change-color-wise {
+    0% {
+        color: inherit;
+    }
+    40% {
+        color: var(--graphwise-pink-color);
+    }
+    80% {
+        color: inherit;
+    }
+    100% {
+        color: inherit;
+    }
 }
 
-.chat-panel .assistant-message .derived-answer-hint {
-    display: flex;
-    align-items: center;
-    gap: 8px;
+.chat-panel .messages-hint .hint2 {
+    font-size: 1.5rem;
 }
 
-.chat-panel .assistant-message .deliver-answer-btn {
-    background: none;
-    border-color: #C2C1C2;
-    color: #414041
-}
-
-.chat-panel .assistant-message .explain-response-wrapper {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
+.chat-panel .new-question {
+    width: 100%;
+    padding-left: 1rem;
 }
 
-.chat-panel .assistant-message .explain-responses {
-    display: flex;
-    flex-direction: column;
-    gap: 32px;
+.chat-panel .new-question .question-input {
+    background-color: #EFF3F8;
+    color: var(--text-color);
 }
 
 .chat-panel .chat-loading {
-    margin-top: 100px;
+    margin: auto;
 }
 
-/* Better handling of markdown-derived HTML inside the assistant message */
-.chat-panel .assistant-message li > p:has(+:not(p)) {
-    margin-bottom: 0;
+.chat-panel .text-warning {
+    font-weight: 300;
 }

package/dist/css/ttyg/no-agents-view.css

@@ -17,3 +17,7 @@
     display: flex;
     justify-content: center;
 }
+
+.no-agents-view-component .create-agent-btn span {
+    margin-left: 0.5rem;
+}