pieter/eveAI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- Created a new eveai_chat plugin to support the new dynamic possibilities of the Specialists. Currently only supports standard Rag retrievers (i.e. no extra arguments).

Browse Source
This commit is contained in:
Josako
2024-11-27 12:26:49 +01:00
parent 07d89d204f
commit 98cb4e4f2f
13 changed files with 462 additions and 405 deletions
Download Patch File Download Diff File Expand all files Collapse all files

253
eveai_app/templates/interaction/view_chat_session.html
View File

@@ -1,6 +1,4 @@
{% extends "base.html" %}
{% from "macros.html" import render_field %}
{% block title %}Session Overview{% endblock %}
{% block content_title %}Session Overview{% endblock %}
@@ -8,7 +6,7 @@
{% block content %}
<div class="container mt-5">
<h2>Chat Session Details</h2>
<h4>Chat Session Details</h4>
<div class="card mb-4">
<div class="card-header">
<h5>Session Information</h5>
@@ -21,44 +19,73 @@
</div>
</div>
<h3>Interactions</h3>
<h5>Interactions</h5>
<div class="accordion" id="interactionsAccordion">
{% for interaction in interactions %}
{% for interaction, id, question_at, specialist_arguments, specialist_results, specialist_name, specialist_type in interactions %}
<div class="accordion-item">
<h2 class="accordion-header" id="heading{{ loop.index }}">
<p class="accordion-header" id="heading{{ loop.index }}">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#collapse{{ loop.index }}" aria-expanded="false"
aria-controls="collapse{{ loop.index }}">
<div class="d-flex justify-content-between align-items-center w-100">
<span class="interaction-question">{{ interaction.question | truncate(50) }}</span>
<span class="interaction-icons">
<i class="material-icons algorithm-icon {{ interaction.algorithm_used | lower }}">fingerprint</i>
<i class="material-icons thumb-icon {% if interaction.appreciation == 100 %}filled{% else %}outlined{% endif %}">thumb_up</i>
<i class="material-icons thumb-icon {% if interaction.appreciation == 0 %}filled{% else %}outlined{% endif %}">thumb_down</i>
</span>
<div class="interaction-header">
<div class="interaction-metadata">
<div class="interaction-time text-muted">
{{ question_at | to_local_time(chat_session.timezone) }}
</div>
<div class="specialist-info">
<span class="badge bg-primary">{{ specialist_name if specialist_name else 'No Specialist' }}</span>
<span class="badge bg-secondary">{{ specialist_type if specialist_type else '' }}</span>
</div>
</div>
<div class="interaction-question">
{{ specialist_results.detailed_query if specialist_results and specialist_results.detailed_query else specialist_arguments.query }}
</div>
</div>
</button>
</h2>
</p>
<div id="collapse{{ loop.index }}" class="accordion-collapse collapse" aria-labelledby="heading{{ loop.index }}"
data-bs-parent="#interactionsAccordion">
<div class="accordion-body">
<h6>Detailed Question:</h6>
<p>{{ interaction.detailed_question }}</p>
<h6>Answer:</h6>
<div class="markdown-content">{{ interaction.answer | safe }}</div>
{% if embeddings_dict.get(interaction.id) %}
<h6>Related Documents:</h6>
<ul>
{% for embedding in embeddings_dict[interaction.id] %}
<li>
{% if embedding.url %}
<a href="{{ embedding.url }}" target="_blank">{{ embedding.url }}</a>
{% else %}
{{ embedding.object_name }}
{% endif %}
</li>
{% endfor %}
</ul>
<!-- Arguments Section -->
{% if specialist_arguments %}
<div class="mb-4">
<h6 class="mb-3">Specialist Arguments:</h6>
<div class="code-wrapper">
<pre><code class="language-json" style="width: 100%;">{{ specialist_arguments | tojson(indent=2) }}</code></pre>
</div>
</div>
{% endif %}
<!-- Results Section -->
{% if specialist_results %}
<div class="mb-4">
<h6 class="mb-3">Specialist Results:</h6>
<div class="code-wrapper">
<pre><code class="language-json" style="width: 100%;">{{ specialist_results | tojson(indent=2) }}</code></pre>
</div>
</div>
{% endif %}
<!-- Related Documents Section -->
{% if embeddings_dict.get(id) %}
<div class="mt-4">
<h6>Related Documents:</h6>
<ul class="list-group">
{% for embedding in embeddings_dict[id] %}
<li class="list-group-item">
{% if embedding.url %}
<a href="{{ embedding.url }}" target="_blank" class="text-decoration-none">
<i class="material-icons align-middle me-2">link</i>
{{ embedding.url }}
</a>
{% else %}
<i class="material-icons align-middle me-2">description</i>
{{ embedding.object_name }}
{% endif %}
</li>
{% endfor %}
</ul>
</div>
{% endif %}
</div>
</div>
@@ -68,14 +95,166 @@
</div>
{% endblock %}
{% block styles %}
{{ super() }}
<style>
.interaction-header {
font-size: 0.9rem;
display: flex;
flex-direction: column;
width: 100%;
padding: 0.5rem 0;
}
.interaction-metadata {
display: flex;
gap: 1rem;
align-items: center;
margin-bottom: 0.5rem;
}
.interaction-time {
font-size: 0.9rem;
}
.specialist-info {
display: flex;
gap: 0.5rem;
align-items: center;
}
.interaction-question {
font-size: 0.9rem;
font-weight: bold;
line-height: 1.4;
}
.badge {
font-size: 0.9rem;
padding: 0.35em 0.65em;
white-space: nowrap;
}
.accordion-button {
padding: 0.5rem 1rem;
}
.accordion-button::after {
margin-left: 1rem;
}
.json-display {
background-color: #f8f9fa;
border-radius: 4px;
padding: 15px;
margin: 0;
white-space: pre-wrap;
word-wrap: break-word;
font-family: monospace;
font-size: 0.85rem;
line-height: 1.5;
max-width: 100%;
overflow-x: auto;
}
.list-group-item {
font-size: 0.9rem;
}
.material-icons {
font-size: 1.1rem;
}
pre {
margin: 0;
padding: 0;
white-space: pre-wrap !important; /* Force wrapping */
word-wrap: break-word !important; /* Break long words if necessary */
max-width: 100%; /* Ensure container doesn't overflow */
}
pre, code {
margin: 0;
padding: 0;
white-space: pre-wrap !important; /* Force wrapping */
word-wrap: break-word !important; /* Break long words if necessary */
max-width: 100%; /* Ensure container doesn't overflow */
}
pre code {
padding: 1rem !important;
border-radius: 4px;
font-size: 0.75rem;
line-height: 1.5;
white-space: pre-wrap !important; /* Force wrapping in code block */
}
.code-wrapper {
position: relative;
width: 100%;
}
/* Override all possible highlight.js white-space settings */
.code-wrapper pre,
.code-wrapper pre code,
.code-wrapper pre code.hljs,
.code-wrapper .hljs {
white-space: pre-wrap !important;
overflow-wrap: break-word !important;
word-wrap: break-word !important;
word-break: break-word !important;
max-width: 100% !important;
overflow-x: hidden !important;
}
.code-wrapper pre {
margin: 0;
background: #f8f9fa;
border-radius: 4px;
}
.code-wrapper pre code {
padding: 1rem !important;
font-family: monospace;
font-size: 0.9rem;
line-height: 1.5;
display: block;
}
/* Override highlight.js default nowrap behavior */
.hljs {
background: #f8f9fa !important;
white-space: pre-wrap !important;
word-wrap: break-word !important;
}
/* Color theme */
.hljs-string {
color: #0a3069 !important;
}
.hljs-attr {
color: #953800 !important;
}
.hljs-number {
color: #116329 !important;
}
.hljs-boolean {
color: #0550ae !important;
}
</style>
{% endblock %}
{% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
{{ super() }}
<script>
document.addEventListener('DOMContentLoaded', function() {
var markdownElements = document.querySelectorAll('.markdown-content');
markdownElements.forEach(function(el) {
el.innerHTML = marked.parse(el.textContent);
});
document.addEventListener('DOMContentLoaded', function() {
// Initialize syntax highlighting
document.querySelectorAll('pre code').forEach((block) => {
hljs.highlightElement(block);
});
});
</script>
{% endblock %}