Beginning changing fonts, fixing the displaying of data, allowing for…

… chat with no title
vzhang03 · Jul 10, 2024 · 77e2118 · 77e2118
1 parent 70ec0ad
commit 77e2118
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 12 deletions.
diff --git a/packages/plugin-chat/example/example.html b/packages/plugin-chat/example/example.html
@@ -6,6 +6,13 @@
     <script src="../dist/index.browser.js"></script>
     <link href="https://unpkg.com/jspsych/css/jspsych.css" rel="stylesheet" type="text/css">
   </head>
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Cantarell:ital,wght@0,400;0,700;1,400;1,700&display=swap');
+    html {
+      font-family: 'Cantarell', serif;
+      font-size: 48px;
+    }
+  </style>
   <body></body>
   <script>
     const jsPsych = initJsPsych({

diff --git a/packages/plugin-chat/example/styles.css b/packages/plugin-chat/example/styles.css
@@ -5,7 +5,6 @@ html, body {
   padding: 0;
   width: 100%;
   height: 100%;
-  font-family: Arial, sans-serif;
   background-color: #d1d0e5;
   overflow-x: hidden;
 }
@@ -21,7 +20,6 @@ html, body {
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add a subtle box shadow*/
 }
 
-
 .bot-title {
   /* height: 80px; */
   height: 8vh;
@@ -35,6 +33,10 @@ html, body {
   display: flex;
   justify-content: center; /* Center horizontally */
   align-items: center; /* Center vertically */
+
+  font-family: "Cantarell", sans-serif;
+  font-weight: 700;
+  font-style: normal;
 }
 
 .bot-title-text {
@@ -102,12 +104,18 @@ html, body {
   background-color: #fff;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
   width: 100%; 
-  font-family: inherit; 
-  font-size: inherit; 
   resize: none; 
   height: auto; 
   overflow-y: auto; 
   flex: 1; 
+
+  font-family: "Cantarell", sans-serif;
+  font-weight: 500;
+  font-size: 23px;
+  line-height: 32.6px;
+  font-style: normal;
+  color: #424242;
+
 }
 
 /* Send button */
@@ -165,6 +173,12 @@ html, body {
   max-width: 70%;
   word-wrap: break-word; 
   text-align: left; 
+
+  font-family: "Cantarell", sans-serif;
+  font-weight: 500;
+  font-size: 23px;
+  line-height: 32.6px;
+  font-style: normal;
 }
 
 /* User message */
@@ -184,6 +198,8 @@ html, body {
 .system-prompt-message {
   background-color: #faf39d; 
   color: #6B503F;
+
+
 }
 
 /* Add pseudo-elements for the speech bubble tails */
@@ -213,4 +229,11 @@ html, body {
   border-right-color: #d1e7dd;
   border-left: 0;
   border-bottom: 0;
+}
+/* Data display */
+#jspsych-data-display {
+  overflow-wrap: break-word;
+  white-space: pre-wrap;
+  width: 100%;
+  overflow-x: auto;
 }
diff --git a/packages/plugin-chat/src/index.ts b/packages/plugin-chat/src/index.ts
@@ -21,7 +21,7 @@ const info = <const>{
     },
     bot_name: {
       type: ParameterType.STRING,
-      default: "Adora-bot",
+      default: undefined,
     },
     continue_button: {
       type: ParameterType.COMPLEX,
@@ -114,15 +114,18 @@ class ChatPlugin implements JsPsychPlugin<Info> {
 
   trial(display_element: HTMLElement, trial: TrialType<Info>) {
     this.initializeTrialVariables(trial);
+    var botTitle = trial.bot_name
+      ? `<div class="bot-title">
+      <h1 class="bot-title-text">` +
+        trial.bot_name +
+        `</h1>
+    </div>`
+      : "";
 
     var html =
-      `<div class="chat-page">
-      <div class="bot-title">
-        <h1 class="bot-title-text">` +
-      trial.bot_name +
-      `</h1>
-      </div>
-      <div class="chat-container">
+      `<div class="chat-page">` +
+      botTitle +
+      `<div class="chat-container">
         <div class="chat-box" id="chat-box"></div>
 
         <div class="chat-fields">