Archiv-System: Clear archiviert, Button lädt ältere Archive chronologisch, kein Limit
This commit is contained in:
Meleki committed
1 parent
fb2c3a0720
commit
843c210209
9 files changed
+363
-129
No files matched your search
+70
-96
@@ -1,78 +1,71 @@
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
font-family: monospace;
|
||||
background: #1a1a2e;
|
||||
color: #e0e0e0;
|
||||
background: #222;
|
||||
color: #eee;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
body, input, select, button, textarea {
|
||||
font-family: monospace;
|
||||
font-size: 1em;
|
||||
line-height: 1.5;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
/* ── Header ── */
|
||||
|
||||
header {
|
||||
padding: 12px 20px;
|
||||
border-bottom: 1px solid #333;
|
||||
padding: 1em 2em;
|
||||
border-bottom: 1px solid #444;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
gap: 1em;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
color: #7c83ff;
|
||||
font-size: 1.2em;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
select {
|
||||
font-family: monospace;
|
||||
padding: 6px 10px;
|
||||
border: 1px solid #333;
|
||||
border-radius: 4px;
|
||||
background: #16213e;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.clear-btn {
|
||||
padding: 6px 10px;
|
||||
button, select, textarea {
|
||||
padding: .5em;
|
||||
border: 1px solid #444;
|
||||
background: #333;
|
||||
color: #aaa;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-family: monospace;
|
||||
font-size: 0.85em;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.clear-btn:hover { background: #444; }
|
||||
button:hover, select:hover, input:hover, textarea:hover {
|
||||
border-color: #666;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
textarea {
|
||||
height: 8em;
|
||||
min-height: 8em;
|
||||
}
|
||||
|
||||
.system-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
gap: .5em;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.system-toggle label {
|
||||
font-size: 0.85em;
|
||||
color: #888;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#systemPrompt {
|
||||
display: none;
|
||||
width: calc(100% - 40px);
|
||||
font-family: monospace;
|
||||
padding: 8px;
|
||||
border: 1px solid #333;
|
||||
border-radius: 4px;
|
||||
background: #0a0a1a;
|
||||
color: #e0e0e0;
|
||||
resize: vertical;
|
||||
font-size: 12px;
|
||||
min-height: 40px;
|
||||
margin: 8px 20px 0;
|
||||
width: calc(100% - 2em);
|
||||
margin: 1em;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
#systemPrompt.visible { display: block; }
|
||||
@@ -80,13 +73,11 @@ select {
|
||||
/* ── Meta Bar ── */
|
||||
|
||||
.meta-bar {
|
||||
padding: 4px 20px;
|
||||
background: #0a0a1a;
|
||||
border-bottom: 1px solid #222;
|
||||
font-size: 0.8em;
|
||||
color: #666;
|
||||
padding: .5em;
|
||||
background: #111;
|
||||
border-bottom: 1px solid #333;
|
||||
flex-shrink: 0;
|
||||
min-height: 24px;
|
||||
min-height: 2em;
|
||||
}
|
||||
|
||||
/* ── Chat ── */
|
||||
@@ -94,53 +85,47 @@ select {
|
||||
#chat {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 16px 20px;
|
||||
padding: 1em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
.msg {
|
||||
max-width: 85%;
|
||||
padding: 10px 14px;
|
||||
border-radius: 8px;
|
||||
padding: 1em;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.msg.user {
|
||||
align-self: flex-end;
|
||||
background: #16213e;
|
||||
border: 1px solid #333;
|
||||
background: #333;
|
||||
border: 1px solid #444;
|
||||
}
|
||||
|
||||
.msg.assistant {
|
||||
align-self: flex-start;
|
||||
background: #0f3460;
|
||||
border: 1px solid #1a4a7a;
|
||||
background: #111;
|
||||
border: 1px solid #333;
|
||||
}
|
||||
|
||||
.msg.system-info {
|
||||
align-self: center;
|
||||
background: #1a1a2e;
|
||||
border: 1px solid #333;
|
||||
color: #888;
|
||||
font-size: 0.85em;
|
||||
border: 1px solid #444;
|
||||
text-align: center;
|
||||
max-width: 95%;
|
||||
}
|
||||
|
||||
/* ── Cursor ── */
|
||||
|
||||
.msg .cursor {
|
||||
display: inline-block;
|
||||
width: 2px;
|
||||
width: .125em;
|
||||
height: 1em;
|
||||
background: #7c83ff;
|
||||
background: #fff;
|
||||
animation: blink 0.8s infinite;
|
||||
vertical-align: text-bottom;
|
||||
margin-left: 1px;
|
||||
margin-left: .125em;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
@@ -152,55 +137,44 @@ select {
|
||||
|
||||
.tool-box {
|
||||
align-self: center;
|
||||
max-width: 95%;
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px;
|
||||
background: #0a1e3d;
|
||||
border: 1px solid #1a3a5c;
|
||||
font-size: 0.85em;
|
||||
padding: .5em;
|
||||
background: #333;
|
||||
border: 1px solid #444;
|
||||
}
|
||||
|
||||
.tool-name { color: #7c83ff; font-weight: bold; }
|
||||
.tool-input { color: #888; margin-left: 6px; font-size: 0.85em; }
|
||||
.tool-result { color: #6bff8a; font-size: 0.8em; margin-top: 4px; max-height: 100px; overflow-y: auto; }
|
||||
.tool-error { color: #ff6b6b; }
|
||||
.tool-spinner { color: #7c83ff; }
|
||||
|
||||
/* ── Input Area ── */
|
||||
|
||||
.input-area {
|
||||
padding: 12px 20px;
|
||||
border-top: 1px solid #333;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-shrink: 0;
|
||||
gap: 1em;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.input-area textarea {
|
||||
flex: 1;
|
||||
font-family: monospace;
|
||||
padding: 10px;
|
||||
border: 1px solid #333;
|
||||
border-radius: 4px;
|
||||
background: #0f3460;
|
||||
color: #e0e0e0;
|
||||
resize: none;
|
||||
font-size: 14px;
|
||||
min-height: 60px;
|
||||
max-height: 150px;
|
||||
}
|
||||
|
||||
.input-area button {
|
||||
padding: 10px 20px;
|
||||
background: #7c83ff;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-family: monospace;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.input-area button:hover { background: #5a63e0; }
|
||||
.input-area button:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
|
||||
/* ── Archive ── */
|
||||
|
||||
.archive-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
.archived { opacity: 0.6; }
|
||||
|
||||
/* ── Archive Button ── */
|
||||
|
||||
.archive-load-btn {
|
||||
display: block;
|
||||
margin-inline: auto;
|
||||
}
|
||||
Reference in new issue
Block a user