Improve chat UI & other fixes

package.json

@@ -1,6 +1,6 @@
 {
   "description": "Pile",
-  "version": "0.9.5",
+  "version": "0.9.6",
   "keywords": [
     "pile"
   ],

release/app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pile",
-  "version": "0.9.5",
+  "version": "0.9.6",
   "description": "Pile: Everyday journal and thought companion.",
   "license": "MIT",
   "author": {

src/main/handlers/index.ts

@@ -35,7 +35,7 @@ ipcMain.handle('index-get-threads-as-text', (event, filePaths = []) => {
   const results = [];
 
   for (const filePath of filePaths) {
-    const entry = pileIndex.getThreadsAsText(filePath);
+    const entry = pileIndex.getThreadAsText(filePath);
     results.push(entry);
   }
   return results;

src/main/utils/pileEmbeddings.js

@@ -46,7 +46,10 @@ class PileEmbeddings {
       await this.initializeAPIKey();
 
       if (!this.apiKey) {
-        throw new Error('API key not found. Please set it first.');
+        console.log(
+          'API key not found. Please set it first to use AI features.'
+        );
+        return;
       }
       const embeddingsFilePath = path.join(pilePath, this.fileName);
       if (fs.existsSync(embeddingsFilePath)) {

src/main/utils/pileIndex.js

@@ -6,6 +6,7 @@ const pileSearchIndex = require('./pileSearchIndex');
 const pileEmbeddings = require('./pileEmbeddings');
 const { walk } = require('../util');
 const { convertHTMLToPlainText } = require('../util');
+const { ContextReplacementPlugin } = require('webpack');
 
 class PileIndex {
   constructor() {
@@ -124,26 +125,34 @@ class PileIndex {
     return this.index;
   }
 
-  getThreadsAsText(filePath) {
-    let fullPath = path.join(this.pilePath, filePath);
-    let fileContent = fs.readFileSync(fullPath, 'utf8');
-    let { content, data: metedata } = matter(fileContent);
-
-    content =
-      `First entry at ${new Date(metedata.createdAt).toString()}:\n ` +
-      convertHTMLToPlainText(content);
-
-    // concat the contents of replies
-    for (let replyPath of metedata.replies) {
-      let replyFullPath = path.join(this.pilePath, replyPath);
-      let replyFileContent = fs.readFileSync(replyFullPath, 'utf8');
-      let { content: replyContent, data: replyMetadata } =
-        matter(replyFileContent);
-      content += `\n\n Reply at ${new Date(
-        replyMetadata.createdAt
-      ).toString()}:\n  ${convertHTMLToPlainText(replyContent)}`;
+  getThreadAsText(filePath) {
+    try {
+      let fullPath = path.join(this.pilePath, filePath);
+      let fileContent = fs.readFileSync(fullPath, 'utf8');
+      let { content, data: metedata } = matter(fileContent);
+
+      content =
+        `First entry at ${new Date(metedata.createdAt).toString()}:\n ` +
+        convertHTMLToPlainText(content);
+
+      // concat the contents of replies
+      for (let replyPath of metedata.replies) {
+        try {
+          let replyFullPath = path.join(this.pilePath, replyPath);
+          let replyFileContent = fs.readFileSync(replyFullPath, 'utf8');
+          let { content: replyContent, data: replyMetadata } =
+            matter(replyFileContent);
+          content += `\n\n Reply at ${new Date(
+            replyMetadata.createdAt
+          ).toString()}:\n  ${convertHTMLToPlainText(replyContent)}`;
+        } catch (error) {
+          continue;
+        }
+      }
+      return content;
+    } catch (error) {
+      console.log('Failed to get thread as text');
     }
-    return content;
   }
 
   // reply's parent needs to be found by checking every non isReply entry and

src/main/utils/pileSearchIndex.js

@@ -62,11 +62,7 @@ class PileSearchIndex {
 
             builder.add(doc);
           } catch (error) {
-            console.error(
-              'Failed to add entry to search index: ',
-              filePath,
-              error
-            );
+            console.error('Failed to add entry to search index: ', filePath);
           }
         }
       });

src/renderer/pages/Pile/Chat/Chat.module.scss

@@ -62,6 +62,9 @@ input {
   overflow-y: overlay;
   backdrop-filter: blur(10px);
   overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 .DialogContent:focus {
@@ -92,28 +95,22 @@ input {
   }
 }
 
+.header {
+  padding: 0 85px;
+  z-index: 1000;
+}
+
 .wrapper {
   position: relative;
-  padding: 0 0;
-  max-width: 800px;
+  max-width: 610px;
   margin: 0 auto;
-  margin-top: 1px;
-  padding: 0 85px;
-  height: 48px;
+  height: 42px;
   display: flex;
   align-items: center;
   z-index: 5;
-
-  .wrapperUnderlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    height: 100px;
-    width: 100vw;
-    background: linear-gradient(var(--bg-secondary), 70%, transparent);
-    z-index: 1;
-    pointer-events: none;
-  }
+  background: var(--bg-tertiary);
+  border-radius: 7px 7px 17px 17px;
+  margin-top: 4px;
 
   .DialogTitle {
     display: flex;
@@ -122,39 +119,41 @@ input {
     width: 100%;
     color: var(--primary);
     font-weight: 400;
-    border-radius: 7px;
     font-size: 15px;
-    line-height: 1.5;
-    margin: 0;
     position: relative;
     z-index: 10 !important;
     user-select: none;
     height: 28px;
+    padding: 0 10px;
+    margin: 0 0 2px 0;
   }
 
   .buttons {
     display: flex;
     align-items: center;
     position: relative;
     z-index: 6;
+    gap: 4px;
+    padding: 4px;
 
     .button {
       text-wrap: nowrap;
       background: var(--bg);
       color: var(--secondary);
-      border-radius: 90px;
-      font-size: 13px;
+      font-size: 14px;
       padding: 5px 14px 5px 10px;
       transition: all ease-in-out 150ms;
       -webkit-app-region: none;
       user-select: none;
-      font-weight: 450;
+      font-weight: 400;
       display: flex;
       align-items: center;
+      height: 33px;
+      border-radius: 7px;
 
       &:hover {
         cursor: pointer;
-        background: var(--bg-tertiary);
+        background: var(--bg-secondary);
       }
 
       &:active {
@@ -174,20 +173,21 @@ input {
   text-wrap: nowrap;
   background: var(--bg);
   color: var(--secondary);
-  border-radius: 90px;
+  border-radius: 7px 4px 13px 7px;
+  height: 33px;
   font-size: 13px;
-  padding: 4px 9px;
+  padding: 0 9px;
   transition: all ease-in-out 150ms;
   -webkit-app-region: none;
   user-select: none;
   font-weight: 450;
   display: flex;
   align-items: center;
-  margin-left: 6px;
+  stroke-width: 2px;
 
   &:hover {
     cursor: pointer;
-    background: var(--bg-tertiary);
+    background: var(--bg-secondary);
   }
 
   &:active {
@@ -208,21 +208,30 @@ input {
   left: 0;
   width: 100%;
   height: 100px;
-  padding-bottom: 16px;
   z-index: 20;
   display: flex;
   justify-content: flex-end;
   flex-direction: column;
   align-items: center;
 
+  .holder {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: var(--bg-tertiary);
+    padding: 4px 4px 10px 4px;
+    border-radius: 17px 17px 12px 12px;
+    margin-bottom: 4px;
+  }
+
   .inputbaroverlay {
     position: fixed;
     bottom: 0;
     left: 0;
     pointer-events: none;
     width: 100%;
     height: 250px;
-    background: linear-gradient(transparent, 60%, var(--bg-secondary));
+    // background: linear-gradient(transparent, 60%, var(--bg-secondary));
   }
 
   .disclaimer {
@@ -235,32 +244,29 @@ input {
     position: relative;
     width: 600px;
     max-width: 600px;
-    background: var(--bg-tertiary);
     display: flex;
     align-items: center;
-    padding: 6px 6px 6px 22px;
-    border-radius: 90px;
+    border-radius: 13px;
     transition: all cubic-bezier(0.215, 0.61, 0.355, 1) 120ms;
-
-    &:focus-within {
-      background: var(--bg);
-      // box-shadow: 0 0 0 2px var(--active);
-    }
+    gap: 4px;
   }
 
   .textarea {
     display: block;
     background: none;
     border: none;
     font-size: 1.2em;
+    background: var(--bg);
     color: var(--secondary);
     resize: none;
     width: 100%;
     outline: none;
-    padding: 0;
-    margin-right: 12px;
+    padding: 0 12px;
     font-family: 'Inter', sans-serif;
     overflow: hidden;
+    min-height: 40px;
+    line-height: 40px;
+    border-radius: 13px 7px 7px 7px;
 
     &::placeholder {
       color: var(--secondary);
@@ -280,8 +286,6 @@ input {
       justify-content: center;
       text-align: center;
       align-items: center;
-      height: 37px;
-      // line-height: 38px;
       background: var(--active);
       border-radius: 8px;
       transition: all ease-in-out 120ms;
@@ -292,7 +296,9 @@ input {
       font-size: 1.2em;
       font-weight: 500;
       width: 60px;
+      height: 40px;
       transition: all cubic-bezier(0.075, 0.82, 0.165, 1) 300ms;
+      border-radius: 7px 13px 7px 7px;
 
       &.processing {
         width: 75px;

src/renderer/pages/Pile/Chat/Intro/Intro.module.scss

@@ -5,30 +5,36 @@
   align-content: center;
   width: 500px;
   margin: 0 auto;
-  padding: 70px 0 50px 0;
+  padding: 55px 0 50px 0;
   text-align: center;
 
-  .icon{
+  .icon {
     height: 55px;
     width: 60px;
     margin: 22px auto;
   }
 
+  .line {
+    height: 100px;
+    width: 1px;
+    margin: 20px auto;
+    border-right: 2px dotted var(--border);
+  }
+
   .title {
     font-family: 'Porpora';
-    font-size: 3.4em;
+    font-size: 2.4em;
     margin: 0 auto;
-    max-width: 400px;
+    max-width: 300px;
     line-height: 1.1;
     color: var(--primary);
     text-shadow: 0 0 50px var(--base), 20px -230px 100px var(--base-hover);
   }
-  
+
   .des {
-    font-size: 1.3em;
+    font-size: 1.2em;
     line-height: 1.4;
     margin: 0 auto;
-    margin-top: 20px;
-    max-width: 340px;
+    max-width: 240px;
   }
 }

src/renderer/pages/Pile/Chat/Intro/index.js

@@ -22,11 +22,13 @@ const Intro = () => {
         <div className={styles.intro}>
           <OpenBookIcon className={styles.icon} />
           <div className={styles.title}>
-          Start a conversation with your journal
+            Start a conversation with your journal
           </div>
+          <div className={styles.line}></div>
           <div className={styles.des}>
-            The AI will use your journal entries as context for the conversation.
-            It's not perfect yet, but we will improve it with time.
+            The AI will use your journal entries as context for the
+            conversation. It's not perfect yet, but we will improve it with
+            time.
           </div>
         </div>
       </motion.div>