Update SmartObsidianView.js and styles.css, and add placeholder in sm…

…art_chat.ejs
brianpetro · Mar 6, 2024 · 077bf4f · 077bf4f
1 parent a7a3641
commit 077bf4f
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 12 deletions.
diff --git a/src/SmartObsidianView.js b/src/SmartObsidianView.js
@@ -1,6 +1,5 @@
 const { getIcon, ItemView } = require("obsidian");
 const views = require("../build/views.json");
-// const ejs = require("ejs");
 const ejs = require("../ejs.min");
 
 // handle rendering EJS views

diff --git a/src/styles.css b/src/styles.css
@@ -127,7 +127,8 @@
   user-select: text;
 }
 .sc-message-container {
-  border: 1px solid var(--blockquote-border-color);
+  /* border: 1px solid var(--blockquote-border-color); */
+  border: 1px solid var(--divider-color);
   border-radius: 10px;
   margin: 0.5rem 0;
   display: flex;
@@ -145,14 +146,20 @@
   word-break: break-word;
 }
 
-.sc-message.assistant {
-  background-color: #007bff;
-  color: #fff;
+.sc-message.assistant, .sc-message.system {
+  /* background-color: #007bff;
+  color: #fff; */
+  background-color: var(--nav-item-background-active);
+  color: var(--nav-item-color);
 }
 .sc-message.user {
-  background-color: #333;
-  color: #fff;
+  /* background-color: #333;
+  color: #fff; */
+  align-self: flex-end;
+  background-color: var(--background-modifier-form-field);
+  color: var(--text-normal);
   align-self: flex-end;
+  border: var(--input-border-width) solid var(--background-modifier-border);
 }
 
 .sc-message-content {

diff --git a/src/views/smart_chat.ejs b/src/views/smart_chat.ejs
@@ -1,7 +1,8 @@
 <div class="workspace-leaf-content" data-type="smart-connections-chat-view">
   <div class="sc-chat-container">
     <div class="sc-top-bar-container">
-      <input class="sc-chat-name-input" type="text" value="UNTITLED">
+      <input class="sc-chat-name-input" type="text" value="<%= name %>" placeholder="Chat Name">
+      <button title="Open Conversation Note"><%- this.get_icon('external-link') %></button>
       <button title="Smart View"><%- this.get_icon('smart-connections') %></button>
       <button title="Save Chat"><%- this.get_icon('save') %></button>
       <button title="Chat History"><%- this.get_icon('history') %></button>
@@ -10,11 +11,9 @@
     <div class="sc-chat-box">
       <div class="sc-message-container">
         <div class="sc-message assistant">
-          <div class="sc-message-content">
-            <p>Hi, I'm ChatGPT with access to your notes via Smart Connections. Ask me a question about your notes and
-              I'll try to answer it.</p>
-          </div>
+          <div class="sc-message-content">Hi there, welcome to the Smart Chat.&nbsp;Ask me a question about your notes and I'll try to answer it.</div>
         </div>
+        <%- messages %>
       </div>
     </div>
     <div class="sc-chat-form"><textarea class="sc-chat-input"