Added new chat page and fixed JSON error
This commit is contained in:
16
main.py
16
main.py
@@ -111,8 +111,7 @@ def generateMessage(_id):
|
||||
print(chunk['message']['content'], end='', flush=True)
|
||||
content = chunk['message']['content']
|
||||
response += content
|
||||
json_data = {"response": response}
|
||||
yield f"data: {json.dumps(json_data)}\n\n"
|
||||
yield f"data: {response}\n\n"
|
||||
|
||||
return Response(generateStream(), mimetype='text/event-stream')
|
||||
else:
|
||||
@@ -238,6 +237,19 @@ def index():
|
||||
else:
|
||||
render_template('logout.html', appName=appName)
|
||||
|
||||
@app.route('/chat/<_id>', methods = ['GET'])
|
||||
def chatPage(_id):
|
||||
token = request.cookies.get('auth_token', 'none')
|
||||
if (token == 'none'):
|
||||
return render_template('login.html', appName=appName, githubUrl=github_auth_endpoint, githublogin=settings["github_oauth"]["enabled"], oauthlogin=settings["oauth_login"])
|
||||
else:
|
||||
a, userId = checkUserPermission(token, True)
|
||||
if (a == True):
|
||||
return render_template('chat.html', appName=appName, chatId=_id)
|
||||
else:
|
||||
render_template('logout.html', appName=appName)
|
||||
|
||||
|
||||
# Login endpoint
|
||||
# Api backend for login screen, check for user and returns token
|
||||
# Arguments: username (required), password (required)
|
||||
|
||||
@@ -4,8 +4,493 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Chat | {{ appName }}</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #f0f4f9;
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
width: 280px;
|
||||
background-color: #ffffff;
|
||||
color: #333;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-right: 1px solid #e2e8f0;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
#sidebar.collapsed {
|
||||
width: 60px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#sidebar.collapsed .chat-item-text {
|
||||
opacity: 0;
|
||||
transition: opacity 0.1s ease;
|
||||
}
|
||||
|
||||
#toggle-sidebar {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 8px;
|
||||
margin-bottom: 24px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
color: #4a5568;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
#toggle-sidebar:hover {
|
||||
color: #1a73e8;
|
||||
}
|
||||
|
||||
#toggle-sidebar svg {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
#sidebar.collapsed #toggle-sidebar svg {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.chat-item {
|
||||
padding: 12px;
|
||||
cursor: pointer;
|
||||
border-radius: 12px;
|
||||
transition: background-color 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.chat-item:hover {
|
||||
background-color: #f1f5f9;
|
||||
}
|
||||
|
||||
.chat-item-text {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
margin-left: 10px;
|
||||
opacity: 1;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.chat-item svg {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
#new-chat-button {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
#main-content {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 24px;
|
||||
background-color: #ffffff;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#chat-area {
|
||||
flex-grow: 1;
|
||||
overflow-y: auto;
|
||||
padding-bottom: 120px;
|
||||
}
|
||||
|
||||
#chat-area::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
#chat-area::-webkit-scrollbar-track {
|
||||
background: #f1f5f9;
|
||||
}
|
||||
#chat-area::-webkit-scrollbar-thumb {
|
||||
background-color: #94a3b8;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.message {
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.message-content {
|
||||
max-width: 70%;
|
||||
word-wrap: break-word;
|
||||
padding: 12px 16px;
|
||||
background-color: transparent;
|
||||
border-radius: 0;
|
||||
/* REQUIRED: Enable stacking of main text and thinking box */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
/* REQUIRED: Stable target for streaming text updates */
|
||||
#main-text {
|
||||
white-space: pre-wrap;
|
||||
min-height: 1.5em; /* Prevent jump when text starts arriving */
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.user-message {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.user-message .message-content {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.ai-message {
|
||||
justify-content: flex-start;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.ai-message .message-content {
|
||||
color: #333;
|
||||
font-size: 1rem;
|
||||
/* line-height: 1.5; */ /* REMOVED: Line height moved to #main-text */
|
||||
}
|
||||
|
||||
#message-box-container {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16px 24px;
|
||||
background-color: #ffffff;
|
||||
border-top: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
#message-input {
|
||||
flex-grow: 1;
|
||||
padding: 12px;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
outline: none;
|
||||
font-size: 16px;
|
||||
background-color: transparent;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
#send-button {
|
||||
padding: 10px;
|
||||
border: none;
|
||||
background-color: #1a73e8;
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#send-button:hover {
|
||||
background-color: #1669c5;
|
||||
}
|
||||
|
||||
.think-container {
|
||||
/* Mimics the overall <details> element: border and padding */
|
||||
border: 1px solid #aaaaaa;
|
||||
border-radius: 4px;
|
||||
padding: 0.5em;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
/* FIX: Prevent children from stretching horizontally (cross-axis alignment in column direction) */
|
||||
align-items: flex-start;
|
||||
}
|
||||
/* MODIFIED: Styling applied to a <span> instead of a <button> */
|
||||
#think-button {
|
||||
/* Mimics the <summary> element: bold, no button chrome */
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
font-size: 1rem;
|
||||
transition: color 0.2s;
|
||||
/* FIX: Ensure button size is strictly content-based to prevent horizontal stretching */
|
||||
display: block;
|
||||
width: fit-content;
|
||||
}
|
||||
#think-button:hover {
|
||||
color: #1a73e8;
|
||||
background: none;
|
||||
}
|
||||
#think-content {
|
||||
/* Content area formatting: adds separator line when visible */
|
||||
border-top: 1px solid #e2e8f0; /* Separator line */
|
||||
padding-top: 0.5em;
|
||||
background-color: transparent;
|
||||
font-size: 0.85rem;
|
||||
color: #444;
|
||||
}
|
||||
.hidden {
|
||||
display: none !important;
|
||||
/* Ensure the separator is removed when content is hidden */
|
||||
border-top: none !important;
|
||||
padding-top: 0 !important;
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<body class="bg-gray-900 text-gray-100 flex h-screen overflow-hidden">
|
||||
|
||||
<aside id="sidebar">
|
||||
<button id="toggle-sidebar">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<div class="chat-item">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M12 19L19 12M5 12L12 19M12 5L19 12L5 12L12 5Z" fill="none"/>
|
||||
</svg>
|
||||
<span class="chat-item-text">Chat with AI #1</span>
|
||||
</div>
|
||||
<div class="chat-item" id="new-chat-button">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M12 5L12 19M5 12L19 12"/>
|
||||
</svg>
|
||||
<span class="chat-item-text">New Chat</span>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main id="main-content">
|
||||
<div id="chat-area">
|
||||
|
||||
</div>
|
||||
|
||||
<div id="message-box-container">
|
||||
<input type="text" id="message-input" placeholder="Type your message...">
|
||||
<button id="send-button">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
|
||||
function toggleThink(aiMessageDiv) {
|
||||
const isCurrentlyOpen = aiMessageDiv.getAttribute("data-thinkopen") === "true";
|
||||
|
||||
// 1. Get the content element by ID inside the message
|
||||
const contentElement = aiMessageDiv.querySelector('#think-content');
|
||||
const buttonElement = aiMessageDiv.querySelector('#think-button');
|
||||
|
||||
if (isCurrentlyOpen) {
|
||||
// Set state to false (closed)
|
||||
aiMessageDiv.setAttribute("data-thinkopen", "false");
|
||||
// Hide the content
|
||||
if (contentElement) contentElement.classList.add('hidden');
|
||||
if (buttonElement) buttonElement.textContent = 'Show thinking';
|
||||
} else {
|
||||
// Set state to true (open)
|
||||
aiMessageDiv.setAttribute("data-thinkopen", "true");
|
||||
// Show the content
|
||||
if (contentElement) contentElement.classList.remove('hidden');
|
||||
if (buttonElement) buttonElement.textContent = 'Hide thinking';
|
||||
}
|
||||
}
|
||||
|
||||
function getCookie(cname) {
|
||||
let name = cname + "=";
|
||||
let decodedCookie = decodeURIComponent(document.cookie);
|
||||
let ca = decodedCookie.split(';');
|
||||
for(let i = 0; i <ca.length; i++) {
|
||||
let c = ca[i];
|
||||
while (c.charAt(0) == ' ') {
|
||||
c = c.substring(1);
|
||||
}
|
||||
if (c.indexOf(name) == 0) {
|
||||
return c.substring(name.length, c.length);
|
||||
}
|
||||
}
|
||||
return "";
|
||||
}
|
||||
|
||||
document.getElementById('toggle-sidebar').addEventListener('click', function() {
|
||||
const sidebar = document.getElementById('sidebar');
|
||||
sidebar.classList.toggle('collapsed');
|
||||
});
|
||||
|
||||
document.getElementById('send-button').addEventListener('click', function() {
|
||||
sendMessage();
|
||||
});
|
||||
|
||||
document.getElementById('message-input').addEventListener('keypress', function(e) {
|
||||
if (e.key === 'Enter') {
|
||||
sendMessage();
|
||||
}
|
||||
});
|
||||
|
||||
async function sendMessage() {
|
||||
const input = document.getElementById('message-input');
|
||||
let chatArea = document.getElementById('chat-area');
|
||||
const messageText = input.value.trim();
|
||||
const chatId = "{{ chatId }}"
|
||||
const endpointUrl = "{{ url_for('generateMessage', _id='PLACEHOLDER') }}".replace('PLACEHOLDER', chatId);
|
||||
const authToken = getCookie('auth_token');
|
||||
|
||||
if (messageText !== '') {
|
||||
const messageblock = document.createElement('div');
|
||||
chatArea = chatArea.appendChild(messageblock)
|
||||
|
||||
const userMessageDiv = document.createElement('div');
|
||||
userMessageDiv.classList.add('message', 'user-message');
|
||||
userMessageDiv.innerHTML = `<div class="message-content">${messageText}</div>`;
|
||||
chatArea.appendChild(userMessageDiv);
|
||||
input.value = '';
|
||||
|
||||
const aiMessageDiv = document.createElement('div');
|
||||
aiMessageDiv.classList.add('message', 'ai-message');
|
||||
// Inject a stable span for streaming content
|
||||
aiMessageDiv.innerHTML = `<div class="message-content"><span id="main-text">Generating response...</span></div>`;
|
||||
const responseDiv = chatArea.appendChild(aiMessageDiv);
|
||||
|
||||
// Initialize state
|
||||
aiMessageDiv.setAttribute("data-thinkopen", "true");
|
||||
|
||||
const postData = {
|
||||
"message": messageText
|
||||
};
|
||||
|
||||
// Streaming state management (CRITICAL for non-destructive streaming)
|
||||
let fullResponseString = '';
|
||||
let mainContentText = '';
|
||||
let thinkingContentText = '';
|
||||
let inThinkBlock = false;
|
||||
let thinkingBlockInjected = false;
|
||||
let mainTextElement = null;
|
||||
let thinkingContentElement = null;
|
||||
const messageContentContainer = responseDiv.querySelector('.message-content');
|
||||
|
||||
|
||||
try {
|
||||
const response = await fetch(endpointUrl, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'token': authToken
|
||||
},
|
||||
body: JSON.stringify(postData)
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
const reader = response.body.getReader();
|
||||
const decoder = new TextDecoder('utf-8');
|
||||
|
||||
// Get references after DOM elements are created
|
||||
mainTextElement = responseDiv.querySelector('#main-text');
|
||||
mainTextElement.textContent = ''; // Clear initial "Generating response..."
|
||||
|
||||
while (true) {
|
||||
const { done, value } = await reader.read();
|
||||
|
||||
if (done) {
|
||||
break;
|
||||
}
|
||||
|
||||
const chunk = decoder.decode(value, { stream: true });
|
||||
|
||||
// DO NOT CHANGE THIS: CHUNKS CONTAIN THE WHOLE MESSAGE
|
||||
fullResponseString = chunk.substring(6);
|
||||
|
||||
// Replaced old destructive logic with non-destructive state machine
|
||||
// Check for state changes based on tags
|
||||
if (fullResponseString.includes("<think>") && !inThinkBlock) {
|
||||
inThinkBlock = true;
|
||||
// Content before <think> is finalized in mainContentText
|
||||
mainContentText = fullResponseString.substring(0, fullResponseString.indexOf("<think>"));
|
||||
mainTextElement.textContent = mainContentText; // Update main text immediately
|
||||
}
|
||||
|
||||
if (fullResponseString.includes("</think>") && inThinkBlock) {
|
||||
inThinkBlock = false;
|
||||
// Content inside <think> is finalized in thinkingContentText
|
||||
thinkingContentText = fullResponseString.substring(
|
||||
fullResponseString.indexOf("<think>") + 7,
|
||||
fullResponseString.lastIndexOf("</think>")
|
||||
);
|
||||
// Content after </think> becomes the new main content buffer
|
||||
mainContentText = fullResponseString.substring(fullResponseString.lastIndexOf("</think>") + 8);
|
||||
}
|
||||
|
||||
// Injection logic: Only inject the button/span once
|
||||
if (!thinkingBlockInjected && (inThinkBlock || fullResponseString.includes("</think>"))) {
|
||||
|
||||
const isThinkOpen = aiMessageDiv.getAttribute("data-thinkopen") === "true";
|
||||
const hiddenClass = isThinkOpen ? '' : ' hidden';
|
||||
const buttonText = isThinkOpen ? 'Hide thinking' : 'Show thinking';
|
||||
const onClickHandler = `toggleThink(this.closest('.ai-message'))`;
|
||||
|
||||
// Injected a <span> with role="button" instead of a <button>
|
||||
messageContentContainer.insertAdjacentHTML('afterbegin',
|
||||
`<div class="think-container">` +
|
||||
`<span id="think-button" role="button" tabindex="0" onclick="${onClickHandler}">${buttonText}</span>` +
|
||||
`<span id="think-content" class="${hiddenClass}"></span>` +
|
||||
`</div>`
|
||||
);
|
||||
|
||||
thinkingContentElement = responseDiv.querySelector('#think-content');
|
||||
thinkingBlockInjected = true;
|
||||
}
|
||||
|
||||
// Update streaming text based on state (NON-DESTRUCTIVE)
|
||||
if (inThinkBlock) {
|
||||
// Extract only the new streaming content for the thinking box
|
||||
let currentContent = fullResponseString.substring(fullResponseString.indexOf("<think>") + 7);
|
||||
if (currentContent.includes("</think>")) {
|
||||
currentContent = currentContent.substring(0, currentContent.lastIndexOf("</think>"));
|
||||
}
|
||||
if (thinkingContentElement) thinkingContentElement.textContent = currentContent;
|
||||
} else if (thinkingBlockInjected) {
|
||||
// Correctly combine the prefix (A) and the suffix (C) from the full string
|
||||
// This ensures the final text is not duplicated.
|
||||
let currentMainText = fullResponseString.substring(0, fullResponseString.indexOf("<think>"));
|
||||
currentMainText = fullResponseString.substring(fullResponseString.lastIndexOf("</think>") + 8);
|
||||
|
||||
if (thinkingContentElement) thinkingContentElement.textContent = thinkingContentText;
|
||||
if (mainTextElement) mainTextElement.textContent = currentMainText.trim();
|
||||
|
||||
} else {
|
||||
// Initial state: streaming only to the main text element
|
||||
mainTextElement.textContent = fullResponseString.trim();
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('An error has occurred:', error);
|
||||
// Ensure error message is appended correctly
|
||||
if (mainTextElement) mainTextElement.textContent += `\n\n--- An error has occurred: ${error.message} ---`;
|
||||
else messageContentContainer.innerHTML = `\n\n--- An error has occurred: ${error.message} ---`;
|
||||
}
|
||||
|
||||
chatArea.scrollTop = chatArea.scrollHeight;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
434
templates/chat.html.bak
Normal file
434
templates/chat.html.bak
Normal file
@@ -0,0 +1,434 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Chat | {{ appName }}</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #f0f4f9;
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
width: 280px;
|
||||
background-color: #ffffff;
|
||||
color: #333;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-right: 1px solid #e2e8f0;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
#sidebar.collapsed {
|
||||
width: 60px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#sidebar.collapsed .chat-item-text {
|
||||
opacity: 0;
|
||||
transition: opacity 0.1s ease;
|
||||
}
|
||||
|
||||
#toggle-sidebar {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 8px;
|
||||
margin-bottom: 24px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
color: #4a5568;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
#toggle-sidebar:hover {
|
||||
color: #1a73e8;
|
||||
}
|
||||
|
||||
#toggle-sidebar svg {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
#sidebar.collapsed #toggle-sidebar svg {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.chat-item {
|
||||
padding: 12px;
|
||||
cursor: pointer;
|
||||
border-radius: 12px;
|
||||
transition: background-color 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.chat-item:hover {
|
||||
background-color: #f1f5f9;
|
||||
}
|
||||
|
||||
.chat-item-text {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
margin-left: 10px;
|
||||
opacity: 1;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.chat-item svg {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
#new-chat-button {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
#main-content {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 24px;
|
||||
background-color: #ffffff;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#chat-area {
|
||||
flex-grow: 1;
|
||||
overflow-y: auto;
|
||||
padding-bottom: 120px;
|
||||
}
|
||||
|
||||
#chat-area::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
#chat-area::-webkit-scrollbar-track {
|
||||
background: #f1f5f9;
|
||||
}
|
||||
#chat-area::-webkit-scrollbar-thumb {
|
||||
background-color: #94a3b8;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.message {
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.message-content {
|
||||
max-width: 70%;
|
||||
word-wrap: break-word;
|
||||
padding: 12px 16px;
|
||||
background-color: transparent;
|
||||
border-radius: 0;
|
||||
}
|
||||
.user-message {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.user-message .message-content {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.ai-message {
|
||||
justify-content: flex-start;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.ai-message .message-content {
|
||||
color: #333;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
#message-box-container {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16px 24px;
|
||||
background-color: #ffffff;
|
||||
border-top: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
#message-input {
|
||||
flex-grow: 1;
|
||||
padding: 12px;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
outline: none;
|
||||
font-size: 16px;
|
||||
background-color: transparent;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
#send-button {
|
||||
padding: 10px;
|
||||
border: none;
|
||||
background-color: #1a73e8;
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#send-button:hover {
|
||||
background-color: #1669c5;
|
||||
}
|
||||
|
||||
.think-container {
|
||||
/* Mimics the overall <details> element: border and padding */
|
||||
border: 1px solid #aaaaaa;
|
||||
border-radius: 4px;
|
||||
padding: 0.5em;
|
||||
margin-top: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
#think-button {
|
||||
/* Mimics the <summary> element: bold, no button chrome */
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
font-size: 1rem;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
#think-button:hover {
|
||||
color: #1a73e8;
|
||||
background: none;
|
||||
}
|
||||
#think-content {
|
||||
/* Content area formatting: adds separator line when visible */
|
||||
border-top: 1px solid #e2e8f0; /* Separator line */
|
||||
padding-top: 0.5em;
|
||||
background-color: transparent;
|
||||
font-size: 0.85rem;
|
||||
color: #444;
|
||||
}
|
||||
.hidden {
|
||||
display: none !important;
|
||||
/* Ensure the separator is removed when content is hidden */
|
||||
border-top: none !important;
|
||||
padding-top: 0 !important;
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-900 text-gray-100 flex h-screen overflow-hidden">
|
||||
|
||||
<aside id="sidebar">
|
||||
<button id="toggle-sidebar">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<div class="chat-item">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M12 19L19 12M5 12L12 19M12 5L19 12L5 12L12 5Z" fill="none"/>
|
||||
</svg>
|
||||
<span class="chat-item-text">Chat with AI #1</span>
|
||||
</div>
|
||||
<div class="chat-item" id="new-chat-button">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M12 5L12 19M5 12L19 12"/>
|
||||
</svg>
|
||||
<span class="chat-item-text">New Chat</span>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main id="main-content">
|
||||
<div id="chat-area">
|
||||
|
||||
</div>
|
||||
|
||||
<div id="message-box-container">
|
||||
<input type="text" id="message-input" placeholder="Type your message...">
|
||||
<button id="send-button">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
|
||||
function toggleThink(aiMessageDiv) {
|
||||
const isCurrentlyOpen = aiMessageDiv.getAttribute("data-thinkopen") === "true";
|
||||
|
||||
// 1. Get the content element by ID inside the message
|
||||
const contentElement = aiMessageDiv.querySelector('#think-content');
|
||||
const buttonElement = aiMessageDiv.querySelector('#think-button');
|
||||
|
||||
if (isCurrentlyOpen) {
|
||||
// Set state to false (closed)
|
||||
aiMessageDiv.setAttribute("data-thinkopen", "false");
|
||||
// Hide the content
|
||||
if (contentElement) contentElement.classList.add('hidden');
|
||||
if (buttonElement) buttonElement.textContent = 'Show thinking';
|
||||
} else {
|
||||
// Set state to true (open)
|
||||
aiMessageDiv.setAttribute("data-thinkopen", "true");
|
||||
// Show the content
|
||||
if (contentElement) contentElement.classList.remove('hidden');
|
||||
if (buttonElement) buttonElement.textContent = 'Hide thinking';
|
||||
}
|
||||
}
|
||||
|
||||
function getCookie(cname) {
|
||||
let name = cname + "=";
|
||||
let decodedCookie = decodeURIComponent(document.cookie);
|
||||
let ca = decodedCookie.split(';');
|
||||
for(let i = 0; i <ca.length; i++) {
|
||||
let c = ca[i];
|
||||
while (c.charAt(0) == ' ') {
|
||||
c = c.substring(1);
|
||||
}
|
||||
if (c.indexOf(name) == 0) {
|
||||
return c.substring(name.length, c.length);
|
||||
}
|
||||
}
|
||||
return "";
|
||||
}
|
||||
|
||||
document.getElementById('toggle-sidebar').addEventListener('click', function() {
|
||||
const sidebar = document.getElementById('sidebar');
|
||||
sidebar.classList.toggle('collapsed');
|
||||
});
|
||||
|
||||
document.getElementById('send-button').addEventListener('click', function() {
|
||||
sendMessage();
|
||||
});
|
||||
|
||||
document.getElementById('message-input').addEventListener('keypress', function(e) {
|
||||
if (e.key === 'Enter') {
|
||||
sendMessage();
|
||||
}
|
||||
});
|
||||
|
||||
async function sendMessage() {
|
||||
const input = document.getElementById('message-input');
|
||||
let chatArea = document.getElementById('chat-area');
|
||||
const messageText = input.value.trim();
|
||||
const chatId = "{{ chatId }}"
|
||||
const endpointUrl = "{{ url_for('generateMessage', _id='PLACEHOLDER') }}".replace('PLACEHOLDER', chatId);
|
||||
const authToken = getCookie('auth_token');
|
||||
|
||||
if (messageText !== '') {
|
||||
const messageblock = document.createElement('div');
|
||||
chatArea = chatArea.appendChild(messageblock)
|
||||
|
||||
const userMessageDiv = document.createElement('div');
|
||||
userMessageDiv.classList.add('message', 'user-message');
|
||||
userMessageDiv.innerHTML = `<div class="message-content">${messageText}</div>`;
|
||||
chatArea.appendChild(userMessageDiv);
|
||||
input.value = '';
|
||||
|
||||
const aiMessageDiv = document.createElement('div');
|
||||
aiMessageDiv.classList.add('message', 'ai-message');
|
||||
aiMessageDiv.innerHTML = `<div class="message-content">Generating response...</div>`;
|
||||
const responseDiv = chatArea.appendChild(aiMessageDiv);
|
||||
|
||||
const postData = {
|
||||
"message": messageText
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await fetch(endpointUrl, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'token': authToken
|
||||
},
|
||||
body: JSON.stringify(postData)
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
const reader = response.body.getReader();
|
||||
const decoder = new TextDecoder('utf-8');
|
||||
|
||||
let responseString = '';
|
||||
|
||||
while (true) {
|
||||
const { done, value } = await reader.read();
|
||||
|
||||
if (done) {
|
||||
break;
|
||||
}
|
||||
|
||||
const chunk = decoder.decode(value, { stream: true });
|
||||
|
||||
responseString = chunk.substring(6);
|
||||
|
||||
const isThinkOpen = aiMessageDiv.getAttribute("data-thinkopen") === "true";
|
||||
// Now used for visibility class
|
||||
const hiddenClass = isThinkOpen ? '' : ' hidden';
|
||||
const buttonText = isThinkOpen ? 'Hide thinking' : 'Show thinking';
|
||||
|
||||
if (responseString.includes("<think>")) {
|
||||
// Handler no longer needs preventDefault as it's not a native <details>
|
||||
const onClickHandler = `toggleThink(this.closest('.ai-message'))`;
|
||||
|
||||
const contentBeforeThink = responseString.substring(0, responseString.indexOf("<think>"));
|
||||
|
||||
let contentInsideThink = '';
|
||||
let contentAfterThink = '';
|
||||
|
||||
if (responseString.includes("</think>")) {
|
||||
contentInsideThink = responseString.substring(
|
||||
responseString.indexOf("<think>") + 7,
|
||||
responseString.lastIndexOf("</think>")
|
||||
);
|
||||
contentAfterThink = responseString.substring(responseString.lastIndexOf("</think>") + 8);
|
||||
} else {
|
||||
contentInsideThink = responseString.substring(responseString.indexOf("<think>") + 7);
|
||||
}
|
||||
|
||||
responseString =
|
||||
contentBeforeThink +
|
||||
`<div class="think-container">` +
|
||||
`<button id="think-button" onclick="${onClickHandler}">${buttonText}</button>` +
|
||||
`<span id="think-content" class="${hiddenClass}">` +
|
||||
contentInsideThink +
|
||||
`</span>` +
|
||||
`</div>` +
|
||||
contentAfterThink;
|
||||
}
|
||||
|
||||
responseDiv.innerHTML = `<div class="message-content">${responseString}</div>`;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('An error has occurred:', error);
|
||||
responseDiv.innerHTML = `<div class="message-content">\n\n--- An error has occurred: ${error.message} ---</div>`;
|
||||
}
|
||||
|
||||
chatArea.scrollTop = chatArea.scrollHeight;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -57,9 +57,8 @@
|
||||
}
|
||||
|
||||
const chunk = decoder.decode(value, { stream: true });
|
||||
const jsonString = chunk.substring(6);
|
||||
const data = JSON.parse(jsonString);
|
||||
outputArea.value = data["response"];
|
||||
const responseString = chunk.substring(6);
|
||||
outputArea.value = responseString;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('An error has occurred:', error);
|
||||
|
||||
Reference in New Issue
Block a user