Skip to content

Administrator / chatgpt.ai-pro.org

Go to a project
Toggle navigation
Toggle navigation pinning
99861780 by Jerald Lim
Options

export

1 parent c7ee220b
Expand all
Inline Side-by-side
Showing 7 changed files with 160 additions and 67 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 console.log("response_to_export", response_to_export);
11 console.log("innerText", response_to_export.innerText);
12 console.log("innerText", response_to_export.innerHTML);
13 return response_to_export?.innerHTML ?? "";
14 };
15 const generatePDF = window.generatePDF;
16
17 const onClickExportToPDF = () => {
18 const response = responseToExport();
19 console.log("response2", response);
20 generatePDF(response, filename);
21 };
22 const onClickExportButton = () => {
23 let modal = document.querySelector(".export-modal-container");
24 const response = responseToExport();
25 console.log("response", response);
26 // if (!response) return;
27
28 if (!modal) {
29 const btutil_buildExportModal = window.btutil_buildExportModal;
30
31 modal = btutil_buildExportModal(onClickExportToPDF);
32 document.body.appendChild(modal);
33 }
34 modal.classList.add("active");
35 };
36
37 return (
38 <>
39 <div
40 className={`export-button ${className}`}
41 id={id}
42 onClick={onClickExportButton}
43 >
44 <svg
45 fill="#ffffff"
46 xmlns="http://www.w3.org/2000/svg"
47 height="1em"
48 viewBox="0 0 512 512"
49 >
50 <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" />
51 </svg>
52 <span>{label}</span>
53 </div>
54 </>
55 );
56 }
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 <div className="ai-logo-container"> 3 clearChat,
4 <img className="ai-logo" alt="Ai-pro logo" src="../assets/images/chatgpt-aipro.png" height="50px"/> 4 currentModel,
5 </div> 5 setCurrentModel,
6 <div className="side-menu-button" onClick={clearChat}> 6 models,
7 <span>+</span> 7 setTemperature,
8 New Chat 8 temperature,
9 </div> 9 }) => (
10 <div className="models"> 10 <aside className="sidemenu">
11 <div className="ai-logo-container">
12 <img
13 className="ai-logo"
14 alt="Ai-pro logo"
15 src="../assets/images/chatgpt-aipro.png"
16 height="50px"
17 />
18 </div>
19 <div className="side-menu-button" onClick={clearChat}>
20 <span>+</span>
21 New Chat
22 </div>
23 <div className="models">
11 <label className="side-label">Model</label> 24 <label className="side-label">Model</label>
12 <select 25 <select
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 ))
26 </select> 39 ) : (
40 <option key={"gpt-3.5-turbo"} value={"gpt-3.5-turbo"}>
41 {"gpt-3.5-turbo"}
42 </option>
43 )}
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")}
31 <Button 49 />
32 text="Code - Crushman" 50 <Button
33 onClick={()=>setCurrentModel("code-cushman-001")} /> 51 text="Code - Crushman"
34 <span className="info"> 52 onClick={() => setCurrentModel("code-cushman-001")}
35 The model parameter controls the engine used to generate the response. Davinci produces best results. 53 />
36 </span> 54 <span className="info">
37 <label className="side-label" >Temperature</label> 55 The model parameter controls the engine used to generate the response.
38 <input 56 Davinci produces best results.
39 className="select-models" 57 </span>
40 type="number" 58 <label className="side-label">Temperature</label>
41 onChange={(e)=> setTemperature(e.target.value)} 59 <input
42 min="0" 60 className="select-models"
43 max="1" 61 type="number"
44 step="0.1" 62 onChange={(e) => setTemperature(e.target.value)}
45 value={temperature} 63 min="0"
46 /> 64 max="1"
47 <Button 65 step="0.1"
48 text="0 - Logical" 66 value={temperature}
49 onClick={()=>setTemperature(0)} /> 67 />
50 <Button 68 <Button text="0 - Logical" onClick={() => setTemperature(0)} />
51 text="0.5 - Balanced" 69 <Button text="0.5 - Balanced" onClick={() => setTemperature(0.5)} />
52 onClick={()=>setTemperature(0.5)} /> 70 <Button text="1 - Creative" onClick={() => setTemperature(1)} />
53 <Button 71 <span className="info">
54 text="1 - Creative" 72 The temperature parameter controls the randomness of the model. 0 is the
55 onClick={()=>setTemperature(1)} /> 73 most logical, 1 is the most creative.
56 <span className="info"> 74 </span>
57 The temperature parameter controls the randomness of the model. 0 is the most logical, 1 is the most creative. 75 <ExportButton label="Export Conversation" filename="Chat-Bot-Plus" />
58 </span> 76 </div>
59 </div> 77 </aside>
60 </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
...@@ -10,4 +10,23 @@ body { ...@@ -10,4 +10,23 @@ body {
10 code { 10 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 }
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 }
13 } 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!