:gem: [Feature] Screenshot for whole chat
Browse files
apps/llm_mixer/index.html
CHANGED
|
@@ -22,12 +22,13 @@
|
|
| 22 |
/>
|
| 23 |
<script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.5/dist/js.cookie.min.js"></script>
|
| 24 |
<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/2.1.0/showdown.min.js"></script>
|
|
|
|
| 25 |
<link rel="stylesheet" href="./js/default.css" />
|
| 26 |
</head>
|
| 27 |
<body>
|
| 28 |
<div id="main-container">
|
| 29 |
<div id="chat-session-container">
|
| 30 |
-
<div id="messagers-container" class="container
|
| 31 |
</div>
|
| 32 |
<div id="user-interactions" class="container fixed-bottom mb-3">
|
| 33 |
<div class="row mt-2 no-gutters">
|
|
@@ -79,7 +80,12 @@
|
|
| 79 |
></select>
|
| 80 |
</div>
|
| 81 |
<div class="col"></div>
|
| 82 |
-
<div class="col-auto
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 83 |
<button id="scroll-to-bottom-button" class="btn px-0">
|
| 84 |
<i class="fa fa-angles-down"></i>
|
| 85 |
</button>
|
|
|
|
| 22 |
/>
|
| 23 |
<script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.5/dist/js.cookie.min.js"></script>
|
| 24 |
<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/2.1.0/showdown.min.js"></script>
|
| 25 |
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
|
| 26 |
<link rel="stylesheet" href="./js/default.css" />
|
| 27 |
</head>
|
| 28 |
<body>
|
| 29 |
<div id="main-container">
|
| 30 |
<div id="chat-session-container">
|
| 31 |
+
<div id="messagers-container" class="container m-3"></div>
|
| 32 |
</div>
|
| 33 |
<div id="user-interactions" class="container fixed-bottom mb-3">
|
| 34 |
<div class="row mt-2 no-gutters">
|
|
|
|
| 80 |
></select>
|
| 81 |
</div>
|
| 82 |
<div class="col"></div>
|
| 83 |
+
<div class="col-auto pl-0">
|
| 84 |
+
<button id="screenshot-button" class="btn px-0">
|
| 85 |
+
<i class="fa fa-camera"></i>
|
| 86 |
+
</button>
|
| 87 |
+
</div>
|
| 88 |
+
<div class="col-auto pl-0">
|
| 89 |
<button id="scroll-to-bottom-button" class="btn px-0">
|
| 90 |
<i class="fa fa-angles-down"></i>
|
| 91 |
</button>
|
apps/llm_mixer/js/buttons_binder.js
CHANGED
|
@@ -24,6 +24,8 @@ export function bind_chat_buttons() {
|
|
| 24 |
let chat_session_container_scroll_binder =
|
| 25 |
new ChatSessionContainerScrollBinder();
|
| 26 |
chat_session_container_scroll_binder.bind();
|
|
|
|
|
|
|
| 27 |
}
|
| 28 |
|
| 29 |
class SendUserInputButtonBinder {
|
|
@@ -192,3 +194,26 @@ class ChatSessionContainerScrollBinder {
|
|
| 192 |
});
|
| 193 |
}
|
| 194 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 24 |
let chat_session_container_scroll_binder =
|
| 25 |
new ChatSessionContainerScrollBinder();
|
| 26 |
chat_session_container_scroll_binder.bind();
|
| 27 |
+
let screenshot_button_binder = new ScreenshotButtonBinder();
|
| 28 |
+
screenshot_button_binder.bind();
|
| 29 |
}
|
| 30 |
|
| 31 |
class SendUserInputButtonBinder {
|
|
|
|
| 194 |
});
|
| 195 |
}
|
| 196 |
}
|
| 197 |
+
|
| 198 |
+
class ScreenshotButtonBinder {
|
| 199 |
+
constructor() {}
|
| 200 |
+
bind() {
|
| 201 |
+
const button = $("#screenshot-button");
|
| 202 |
+
button.attr("title", "Take screenshot for whole chat");
|
| 203 |
+
button.click(() => {
|
| 204 |
+
html2canvas($("#chat-session-container")[0]).then((canvas) => {
|
| 205 |
+
var link = document.createElement("a");
|
| 206 |
+
let date = new Date();
|
| 207 |
+
let date_string = date.toISOString().split("T")[0];
|
| 208 |
+
let time_string = date
|
| 209 |
+
.toTimeString()
|
| 210 |
+
.split(" ")[0]
|
| 211 |
+
.replace(/:/g, "-");
|
| 212 |
+
let datetime_string = `${date_string}_${time_string}`;
|
| 213 |
+
link.download = `chat_${datetime_string}.png`;
|
| 214 |
+
link.href = canvas.toDataURL("image/png");
|
| 215 |
+
link.click();
|
| 216 |
+
});
|
| 217 |
+
});
|
| 218 |
+
}
|
| 219 |
+
}
|