Skip to content

Administrator / chatgpt.ai-pro.org

Go to a project
Toggle navigation
Toggle navigation pinning
eef337a6 by Janis
Options

Merge branch '28334_export_response_chatbot_plus' into 'master' 

export

See merge request !65
2 parents 27441a3a b8784cd5
Expand all
Inline Side-by-side
Showing 7 changed files with 125 additions and 37 deletions
client/package-lock.json
This diff could not be displayed because it is too large.
client/src/ChatBox.js
1 import React, { useState } from "react"; 1 import React, { useState } from "react";
2 import SuggestedOptions from './suggestedOptions' 2 import SuggestedOptions from './suggestedOptions'
3 3 import ExportButton from "./ExportButton";
4 const ChatBox = ({chatLog, setChatInput, handleSubmit, chatInput, startedInteraction, setStartedInteraction}) => { 4 const ChatBox = ({chatLog, setChatInput, handleSubmit, chatInput, startedInteraction, setStartedInteraction}) => {
5 5
6 return ( 6 return (
...@@ -9,10 +9,11 @@ const ChatBox = ({chatLog, setChatInput, handleSubmit, chatInput, startedInterac ...@@ -9,10 +9,11 @@ const ChatBox = ({chatLog, setChatInput, handleSubmit, chatInput, startedInterac
9 <SuggestedOptions setChatInput={setChatInput}/> 9 <SuggestedOptions setChatInput={setChatInput}/>
10 ) : ( 10 ) : (
11 <> 11 <>
12 <div className="chat-log"> 12 <div className="chat-log response-to-export">
13 {chatLog.map((message, index) => ( 13 {chatLog.map((message, index) => (
14 <ChatMessage key={index} message={message} /> 14 <ChatMessage key={index} message={message} />
15 ))} 15 ))}
16 <ExportButton className="export-button-mobile" label="Export Conversation" filename="Chat-Bot-Plus" />
16 </div> 17 </div>
17 18
18 </> 19 </>
...@@ -39,9 +40,9 @@ const ChatBox = ({chatLog, setChatInput, handleSubmit, chatInput, startedInterac ...@@ -39,9 +40,9 @@ const ChatBox = ({chatLog, setChatInput, handleSubmit, chatInput, startedInterac
39 const ChatMessage = ({ message }) => { 40 const ChatMessage = ({ message }) => {
40 return ( 41 return (
41 <div className={`chat-message ${message.user === "gpt" && "chatgpt"}`}> 42 <div className={`chat-message ${message.user === "gpt" && "chatgpt"}`}>
42 <div className="chat-message-center"> 43 <div className="chat-message-center" style={ message.user === "gpt" ? { background: "#ddf1f9"} : {}}>
43 <div className={`avatar ${message.user === "gpt" && "chatgpt"}`}> 44 <div className={`avatar ${message.user === "gpt" && "chatgpt"}`}>
44 {message.user === "gpt" ? <img className="ai-logo" alt="Ai-pro bot" src="../assets/images/bot.png" width="30px"/> : <img className="ai-logo" alt="Ai-pro user" src="../assets/images/user.svg" />} 45 {message.user === "gpt" ? <img className="ai-logo" alt="Ai-pro bot" src="../assets/images/bot.png" width="30px"/> : <img className="ai-logo" alt="Ai-pro user" src="../assets/images/user.png" />}
45 </div> 46 </div>
46 {/* <div className="message"> 47 {/* <div className="message">
47 {message.message} 48 {message.message}
......
client/src/ExportButton.jsx 0 → 100644
1 export default function ExportButton({
2 label = "Export",
3 filename = "export",
4 className = "",
5 id = "",
6 }) {
7 const responseToExport = () => {
8 const response_to_export = document.querySelector(".response-to-export");
9 if (!response_to_export) return;
10 return response_to_export?.innerHTML ?? "";
11 };
12 const generatePDF = window.generatePDF;
13
14 const onClickExportToPDF = () => {
15 const response = responseToExport();
16 generatePDF(response, filename);
17 };
18 const onClickExportButton = () => {
19 let modal = document.querySelector(".export-modal-container");
20 const response = responseToExport();
21 if (!response) return;
22
23 if (!modal) {
24 const btutil_buildExportModal = window.btutil_buildExportModal;
25
26 modal = btutil_buildExportModal(onClickExportToPDF);
27 document.body.appendChild(modal);
28 }
29 modal.classList.add("active");
30 };
31
32 return (
33 <>
34 <div
35 className={`export-button ${className}`}
36 id={id}
37 onClick={onClickExportButton}
38 >
39 <svg
40 fill="#ffffff"
41 xmlns="http://www.w3.org/2000/svg"
42 height="1em"
43 viewBox="0 0 512 512"
44 >
45 <path d="M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z" />
46 </svg>
47 <span>{label}</span>
48 </div>
49 </>
50 );
51 }
client/src/SideMenu.js
1 const SideMenu = ({ clearChat, currentModel, setCurrentModel, models, setTemperature, temperature }) => 1 import ExportButton from "./ExportButton";
2 <aside className="sidemenu"> 2 const SideMenu = ({
3 clearChat,
4 currentModel,
5 setCurrentModel,
6 models,
7 setTemperature,
8 temperature,
9 }) => (
10 <aside className="sidemenu">
3 <div className="ai-logo-container"> 11 <div className="ai-logo-container">
4 <img className="ai-logo" alt="Ai-pro logo" src="../assets/images/chatgpt-aipro.png" height="50px"/> 12 <img
13 className="ai-logo"
14 alt="Ai-pro logo"
15 src="../assets/images/chatgpt-aipro.png"
16 height="50px"
17 />
5 </div> 18 </div>
6 <div className="side-menu-button" onClick={clearChat}> 19 <div className="side-menu-button" onClick={clearChat}>
7 <span>+</span> 20 <span>+</span>
...@@ -13,57 +26,61 @@ const SideMenu = ({ clearChat, currentModel, setCurrentModel, models, setTempera ...@@ -13,57 +26,61 @@ const SideMenu = ({ clearChat, currentModel, setCurrentModel, models, setTempera
13 // active if model is select is currentModel 26 // active if model is select is currentModel
14 value={currentModel} 27 value={currentModel}
15 className="select-models" 28 className="select-models"
16 onChange={(e)=>{ 29 onChange={(e) => {
17 setCurrentModel(e.target.value) 30 setCurrentModel(e.target.value);
18 }}> 31 }}
19 {models && models.length ? models.map((model, index) => ( 32 >
20 <option 33 {models && models.length ? (
21 key={model.id} 34 models.map((model, index) => (
22 value={model.id}>{model.id}</option> 35 <option key={model.id} value={model.id}>
23 )) : <option 36 {model.id}
24 key={"gpt-3.5-turbo"} 37 </option>
25 value={"gpt-3.5-turbo"}>{"gpt-3.5-turbo"}</option>} 38 ))
39 ) : (
40 <option key={"gpt-3.5-turbo"} value={"gpt-3.5-turbo"}>
41 {"gpt-3.5-turbo"}
42 </option>
43 )}
26 </select> 44 </select>
27 45
28 <Button 46 <Button
29 text="Smart - Davinci" 47 text="Smart - Davinci"
30 onClick={()=>setCurrentModel("text-davinci-003")} /> 48 onClick={() => setCurrentModel("text-davinci-003")}
49 />
31 <Button 50 <Button
32 text="Code - Crushman" 51 text="Code - Crushman"
33 onClick={()=>setCurrentModel("code-cushman-001")} /> 52 onClick={() => setCurrentModel("code-cushman-001")}
53 />
34 <span className="info"> 54 <span className="info">
35 The model parameter controls the engine used to generate the response. Davinci produces best results. 55 The model parameter controls the engine used to generate the response.
56 Davinci produces best results.
36 </span> 57 </span>
37 <label className="side-label" >Temperature</label> 58 <label className="side-label">Temperature</label>
38 <input 59 <input
39 className="select-models" 60 className="select-models"
40 type="number" 61 type="number"
41 onChange={(e)=> setTemperature(e.target.value)} 62 onChange={(e) => setTemperature(e.target.value)}
42 min="0" 63 min="0"
43 max="1" 64 max="1"
44 step="0.1" 65 step="0.1"
45 value={temperature} 66 value={temperature}
46 /> 67 />
47 <Button 68 <Button text="0 - Logical" onClick={() => setTemperature(0)} />
48 text="0 - Logical" 69 <Button text="0.5 - Balanced" onClick={() => setTemperature(0.5)} />
49 onClick={()=>setTemperature(0)} /> 70 <Button text="1 - Creative" onClick={() => setTemperature(1)} />
50 <Button
51 text="0.5 - Balanced"
52 onClick={()=>setTemperature(0.5)} />
53 <Button
54 text="1 - Creative"
55 onClick={()=>setTemperature(1)} />
56 <span className="info"> 71 <span className="info">
57 The temperature parameter controls the randomness of the model. 0 is the most logical, 1 is the most creative. 72 The temperature parameter controls the randomness of the model. 0 is the
73 most logical, 1 is the most creative.
58 </span> 74 </span>
75 <ExportButton label="Export Conversation" filename="Chat-Bot-Plus" />
59 </div> 76 </div>
60 </aside> 77 </aside>
78 );
61 79
62 const Button = ({ onClick, text }) => 80 const Button = ({ onClick, text }) => (
63 <div 81 <div className="button-picker" onClick={onClick}>
64 className="button-picker"
65 onClick={onClick}>
66 {text} 82 {text}
67 </div> 83 </div>
84 );
68 85
69 export default SideMenu
...\ No newline at end of file ...\ No newline at end of file
86 export default SideMenu;
......
client/src/index.css
...@@ -11,3 +11,22 @@ code { ...@@ -11,3 +11,22 @@ code {
11 font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 11 font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12 monospace; 12 monospace;
13 } 13 }
14
15 .export-button-mobile {
16 display: none !important;
17 position: fixed;
18 bottom: 85px;
19 right: 0;
20 min-width: 50px;
21 box-shadow: 0px 4px 4px 0px #00000040;
22 }
23
24 .export-button-mobile span {
25 display: none;
26 }
27
28 @media screen and (max-width: 640px) {
29 .export-button-mobile {
30 display: flex !important;
31 }
32 }
...\ No newline at end of file ...\ No newline at end of file
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!