Skip to content

Commit 11b6f4e

Browse files
thefirehackerthefirehacker
authored
Merge pull request #52 from thefirehacker/3.6.0_Voice_DeepResearchPlayground_Integration
all sync works fine
2 parents 69d54bd + 09fdd71 commit 11b6f4e

File tree

6 files changed

+300
-67
lines changed

6 files changed

+300
-67
lines changed

‎Playground.html‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -714,13 +714,16 @@ <h3>🎮 AI Persona</h3>
714714
<!-- Deep Research -->
715715
<div class="control-group">
716716
<label>Deep Research</label>
717-
<input type="text" id="researchTopic" placeholder="Enter research topic...">
718-
<button id="startResearch" class="btn secondary">Start Research</button>
719-
<select id="researchDepth">
717+
<input type="text" id="researchTopic" placeholder="Enter research topic..." disabled>
718+
<button id="startResearch" class="btn secondary" disabled>🔬 Use DeepResearch</button>
719+
<select id="researchDepth" disabled>
720720
<option value="quick">Quick Analysis</option>
721721
<option value="comprehensive">Comprehensive</option>
722722
<option value="detailed">Detailed Study</option>
723723
</select>
724+
<div style="font-size: 11px; color: rgba(255,255,255,0.6); margin-top: 5px; text-align: center;">
725+
💡 For research, please use the DeepResearch page
726+
</div>
724727
</div>
725728

726729
<!-- Document Management -->

‎index.html‎

Lines changed: 100 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes, shrink-to-fit=no">
66
<title>TimeCapsule-SLM - Complete AI-powered Research & Creative Platform</title>
77
<link rel="icon" type="image/png" href="lib/Media/TimeCapsule_03.png">
88

@@ -18,20 +18,53 @@
1818
align-items: flex-start;
1919
color: white;
2020
box-sizing: border-box;
21+
overflow-x: hidden;
22+
width: 100%;
2123
}
2224

2325
/* Mobile body padding adjustment */
24-
@media screen and (max-width: 768px) {
26+
@media screen and (max-width: 768px),
27+
screen and (max-device-width: 768px) {
2528
body {
2629
padding-top: 80px !important;
2730
}
2831
}
32+
33+
/* Force mobile layout for medium mobile screens */
34+
@media screen and (max-width: 500px) {
35+
.main-container {
36+
padding: 15px 10px !important;
37+
width: 100% !important;
38+
max-width: 100% !important;
39+
}
40+
41+
.features-grid {
42+
grid-template-columns: 1fr !important;
43+
gap: 15px !important;
44+
}
45+
46+
.feature-card {
47+
width: 100% !important;
48+
max-width: 100% !important;
49+
padding: 20px 15px !important;
50+
margin: 0 !important;
51+
grid-column: span 1 !important;
52+
}
53+
54+
.feature-card.canvas {
55+
grid-column: span 1 !important;
56+
justify-self: stretch !important;
57+
max-width: 100% !important;
58+
}
59+
}
2960

3061

3162
.main-container {
3263
max-width: 1200px;
3364
margin: 0 auto;
3465
padding: 40px 20px;
66+
width: 100%;
67+
box-sizing: border-box;
3568
}
3669

3770
.hero-section {
@@ -101,6 +134,7 @@
101134
padding: 25px;
102135
justify-self: center;
103136
margin-top: 20px;
137+
box-sizing: border-box;
104138
}
105139

106140
.feature-card.canvas .feature-title {
@@ -395,19 +429,27 @@
395429

396430

397431
/* Mobile Optimization - Enhanced */
398-
@media (max-width: 768px) {
432+
@media screen and (max-width: 768px),
433+
screen and (max-device-width: 768px) {
399434
body {
400435
padding-top: 80px; /* Reduced top padding for mobile */
436+
padding-bottom: 20px; /* Add bottom padding for mobile */
401437
}
402438

403439
.main-container {
404-
padding: 20px 15px; /* Better mobile padding */
440+
padding: 20px 15px !important; /* Better mobile padding */
441+
max-width: 100% !important; /* Ensure full width on mobile */
442+
width: 100% !important;
443+
box-sizing: border-box !important;
405444
}
406445

407446
/* Hero Section Mobile */
408447
.hero-section {
409-
padding: 30px 20px;
410-
margin-bottom: 30px;
448+
padding: 30px 20px !important;
449+
margin-bottom: 30px !important;
450+
width: 100% !important;
451+
max-width: 100% !important;
452+
box-sizing: border-box !important;
411453
}
412454

413455
.logo {
@@ -430,13 +472,15 @@
430472

431473
.hero-description {
432474
font-size: 0.95em;
433-
line-height: 1.5;
475+
line-height: 1.6;
434476
padding: 0 10px;
477+
text-align: left;
435478
}
436479

437480
.hero-description strong {
438481
display: block;
439482
margin-bottom: 8px;
483+
color: #4facfe;
440484
}
441485

442486
.hero-description br {
@@ -447,14 +491,29 @@
447491

448492
/* Features Grid Mobile */
449493
.features-grid {
450-
grid-template-columns: 1fr;
451-
gap: 20px;
452-
margin-top: 30px;
494+
grid-template-columns: 1fr !important;
495+
gap: 20px !important;
496+
margin-top: 30px !important;
497+
width: 100% !important;
498+
max-width: 100% !important;
453499
}
454500

455501
.feature-card {
456-
padding: 25px 20px;
457-
margin: 0;
502+
padding: 25px 20px !important;
503+
margin: 0 !important;
504+
width: 100% !important;
505+
box-sizing: border-box !important;
506+
max-width: 100% !important;
507+
grid-column: span 1 !important;
508+
}
509+
510+
/* Canvas card mobile override */
511+
.feature-card.canvas {
512+
max-width: 100% !important;
513+
padding: 20px 15px !important;
514+
margin-top: 0 !important;
515+
grid-column: span 1 !important;
516+
justify-self: stretch !important;
458517
}
459518

460519
.feature-icon {
@@ -567,6 +626,7 @@
567626
flex-direction: column;
568627
gap: 12px;
569628
align-items: stretch;
629+
max-width: 100%;
570630
}
571631

572632
.github-cta {
@@ -576,6 +636,7 @@
576636
font-size: 15px;
577637
justify-content: center;
578638
margin: 0;
639+
box-sizing: border-box;
579640
}
580641

581642
/* Improved touch targets */
@@ -587,16 +648,35 @@
587648
transform: scale(0.98);
588649
transition: transform 0.1s ease;
589650
}
651+
652+
/* Disable hover effects on mobile for better touch experience */
653+
.feature-card:hover {
654+
transform: none;
655+
box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
656+
}
657+
658+
.feature-cta:hover {
659+
transform: none;
660+
box-shadow: 0 4px 15px rgba(79, 172, 254, 0.4);
661+
}
662+
663+
.feature-cta:active {
664+
transform: scale(0.98);
665+
transition: transform 0.1s ease;
666+
}
590667
}
591668

592669
/* Small Mobile Devices */
593-
@media (max-width: 480px) {
670+
@media screen and (max-width: 480px),
671+
screen and (max-device-width: 480px) {
594672
.main-container {
595673
padding: 15px 10px;
674+
max-width: 100%;
596675
}
597676

598677
.hero-section {
599678
padding: 25px 15px;
679+
margin-bottom: 20px;
600680
}
601681

602682
.hero-title {
@@ -610,12 +690,18 @@
610690
.hero-description {
611691
font-size: 0.9em;
612692
padding: 0 5px;
693+
text-align: left;
694+
line-height: 1.6;
613695
}
614696

615697
.feature-card {
616698
padding: 20px 15px;
617699
}
618700

701+
.feature-card.canvas {
702+
padding: 18px 12px;
703+
}
704+
619705
.feature-title {
620706
font-size: 1.4em;
621707
}
@@ -644,7 +730,7 @@
644730
}
645731

646732
/* Large Mobile / Small Tablet */
647-
@media (min-width: 769px) and (max-width: 1024px) {
733+
@media screen and (min-width: 769px) and (max-width: 1024px) {
648734
.features-grid {
649735
grid-template-columns: 1fr;
650736
max-width: 600px;

‎lib/Pages/Playground/playground.js‎

Lines changed: 84 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,11 @@ class PlaygroundApp {
1414
this.sharedListenerSetup = false;
1515
this.lastConnectionMessageTime = 0;
1616

17+
// 🆕 Chat history management
18+
this.chatHistory = [];
19+
this.maxChatHistory = 20; // Keep last 20 messages for context
20+
this.chatContextLimit = 10; // Use last 10 messages for RAG context
21+
1722
this.init();
1823
}
1924

@@ -58,6 +63,9 @@ class PlaygroundApp {
5863
// Listen for shared AI connection changes
5964
this.setupSharedConnectionListener();
6065

66+
// 🆕 Load saved chat history
67+
this.loadChatHistory();
68+
6169
// Ensure button text is correct
6270
setTimeout(() => {
6371
this.updateConnectButtonText();
@@ -655,6 +663,7 @@ Based on the research, here are the key recommendations:
655663

656664
clearChat() {
657665
this.chatHistory = [];
666+
this.saveChatHistory(); // 🆕 Clear saved history too
658667
this.renderChatHistory();
659668
this.addChatMessage('system', '🗑️ Chat cleared');
660669
}
@@ -679,18 +688,89 @@ Based on the research, here are the key recommendations:
679688
}
680689

681690
addChatMessage(type, content) {
691+
const displayContent = document.getElementById('displayContent');
692+
693+
// Ensure we have the chat messages container
694+
let chatMessages = displayContent.querySelector('.chat-messages');
695+
if (!chatMessages) {
696+
displayContent.innerHTML = '<div class="chat-messages"></div>';
697+
chatMessages = displayContent.querySelector('.chat-messages');
698+
}
699+
700+
// 🆕 Add to chat history with timestamp
682701
const message = {
683702
type,
684703
content,
685-
timestamp: new Date().toISOString()
704+
timestamp: new Date().toISOString(),
705+
id: Date.now() + Math.random() // Unique ID
686706
};
687707

688708
this.chatHistory.push(message);
689-
this.renderChatHistory();
709+
710+
// 🆕 Maintain max history limit
711+
if (this.chatHistory.length > this.maxChatHistory) {
712+
this.chatHistory = this.chatHistory.slice(-this.maxChatHistory);
713+
}
714+
715+
// 🆕 Save to localStorage
716+
this.saveChatHistory();
717+
718+
// Create and add message element
719+
const messageElement = document.createElement('div');
720+
messageElement.className = `chat-message ${type}`;
721+
messageElement.innerHTML = `<div class="message-content">${this.formatMessage(content)}</div>`;
722+
723+
chatMessages.appendChild(messageElement);
690724

691725
// Scroll to bottom
692-
const displayContent = document.getElementById('displayContent');
693-
displayContent.scrollTop = displayContent.scrollHeight;
726+
chatMessages.scrollTop = chatMessages.scrollHeight;
727+
}
728+
729+
/**
730+
* 🆕 Save chat history to localStorage
731+
*/
732+
saveChatHistory() {
733+
try {
734+
localStorage.setItem('playground_chat_history', JSON.stringify(this.chatHistory));
735+
} catch (error) {
736+
console.warn('Failed to save chat history:', error);
737+
}
738+
}
739+
740+
/**
741+
* 🆕 Load chat history from localStorage
742+
*/
743+
loadChatHistory() {
744+
try {
745+
const saved = localStorage.getItem('playground_chat_history');
746+
if (saved) {
747+
this.chatHistory = JSON.parse(saved);
748+
console.log(`📚 Loaded ${this.chatHistory.length} previous chat messages`);
749+
750+
// Render loaded history
751+
this.renderChatHistory();
752+
}
753+
} catch (error) {
754+
console.warn('Failed to load chat history:', error);
755+
this.chatHistory = [];
756+
}
757+
}
758+
759+
/**
760+
* 🆕 Get recent chat context for RAG
761+
*/
762+
getChatContext() {
763+
// Get last N messages for context, excluding system messages
764+
const contextMessages = this.chatHistory
765+
.filter(msg => msg.type !== 'system')
766+
.slice(-this.chatContextLimit);
767+
768+
if (contextMessages.length === 0) return '';
769+
770+
return contextMessages.map(msg => {
771+
const role = msg.type === 'user' ? 'Human' : 'Assistant';
772+
return `${role}: ${msg.content}`;
773+
}).join('\n\n');
694774
}
695775

696776
renderChatHistory() {

0 commit comments

Comments
 (0)