Merge branch 'main' into feature/drag_and_drop

UdaraJay · Nov 13, 2023 · a8771df · a8771df
2 parents 6de6e94 + 2ee0687
commit a8771df
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 41 deletions.
diff --git a/package.json b/package.json
@@ -32,7 +32,7 @@
     "build:renderer": "cross-env NODE_ENV=production TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.renderer.prod.ts",
     "postinstall": "ts-node .erb/scripts/check-native-dep.js && electron-builder install-app-deps && cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.renderer.dev.dll.ts",
     "lint": "cross-env NODE_ENV=development eslint . --ext .js,.jsx,.ts,.tsx",
-    "package": "ts-node ./.erb/scripts/clean.js dist && npm run build && electron-builder build --mac --win --publish never",
+    "package": "ts-node ./.erb/scripts/clean.js dist && npm run build && electron-builder build --mac --publish never",
     "rebuild": "electron-rebuild --parallel --types prod,dev,optional --module-dir release/app",
     "start": "ts-node ./.erb/scripts/check-port-in-use.js && npm run start:renderer",
     "start:main": "cross-env NODE_ENV=development electronmon -r ts-node/register/transpile-only .",

diff --git a/src/renderer/pages/Pile/Editor/Attachments/Attachments.module.scss b/src/renderer/pages/Pile/Editor/Attachments/Attachments.module.scss
@@ -7,6 +7,7 @@
 
         img {
             max-height: 350px;
+            max-width: 100%;
             border-radius: 22px;
             transition: all ease-in-out 120ms;
 

diff --git a/src/renderer/pages/Pile/Editor/Attachments/index.jsx b/src/renderer/pages/Pile/Editor/Attachments/index.jsx
@@ -1,7 +1,7 @@
 import styles from './Attachments.module.scss';
 import { useCallback, useState, useEffect } from 'react';
 import { DiscIcon, PhotoIcon, TrashIcon, TagIcon } from 'renderer/icons';
-import { motion, AnimatePresence } from 'framer-motion';
+import { motion } from 'framer-motion';
 import { usePilesContext } from 'renderer/context/PilesContext';
 
 export default function Attachments({
@@ -20,17 +20,25 @@ export default function Attachments({
 
     if (image_exts.includes(extension)) {
       return (
-        <div key={attachment} className={styles.image}>
-          {editable && (
-            <div
-              className={styles.remove}
-              onClick={() => onRemoveAttachment(attachment)}
-            >
-              <TrashIcon className={styles.icon} />
-            </div>
-          )}
-          <img src={imgPath} draggable="false" />
-        </div>
+        <motion.div
+          key={attachment}
+          initial={{ opacity: 0, y: -30, scale: 0.8 }}
+          animate={{ opacity: 1, y: 0, scale: 1 }}
+          exit={{ opacity: 0, y: 0, scale: 0.9 }}
+          transition={{ delay: 0.1 }}
+        >
+          <div className={styles.image}>
+            {editable && (
+              <div
+                className={styles.remove}
+                onClick={() => onRemoveAttachment(attachment)}
+              >
+                <TrashIcon className={styles.icon} />
+              </div>
+            )}
+            <img src={imgPath} draggable="false" />
+          </div>
+        </motion.div>
       );
     }
   });

diff --git a/src/renderer/pages/Pile/Editor/index.jsx b/src/renderer/pages/Pile/Editor/index.jsx
@@ -20,6 +20,7 @@ import ProseMirrorStyles from './ProseMirror.scss';
 import { useAIContext } from 'renderer/context/AIContext';
 import useThread from 'renderer/hooks/useThread';
 import LinkPreviews from './LinkPreviews';
+import { useToastsContext } from 'renderer/context/ToastsContext';
 
 export default function Editor({
   postPath = null,
@@ -44,12 +45,12 @@ export default function Editor({
   } = usePost(postPath, { isReply, parentPostPath, reloadParentPost, isAI });
   const { getThread } = useThread();
   const { ai, prompt } = useAIContext();
+  const { addNotification, removeNotification } = useToastsContext();
 
   const isNew = !postPath;
 
   const EnterSubmitExtension = Extension.create({
-    name: 'customExtension',
-
+    name: 'EnterSubmitExtension',
     addCommands() {
       return {
         triggerSubmit:
@@ -203,11 +204,23 @@ export default function Editor({
     };
   }, [handleSubmit, editor]);
 
+  // This has to ensure that it only calls the AI generate function
+  // on entries added for the AI that are empty.
   const generateAiResponse = useCallback(async () => {
     if (!editor) return;
     if (isAIResponding) return;
+
     const isEmpty = editor.state.doc.textContent.length === 0;
+
+    // isAI makes sure AI responses are only generated for
+    // AI entries that are empty.
     if (isAI && isEmpty) {
+      addNotification({
+        id: 'reflecting',
+        type: 'thinking',
+        message: 'talking to AI',
+        dismissTime: 10000,
+      });
       setEditable(false);
       setIsAiResponding(true);
       const thread = await getThread(parentPostPath);
@@ -220,6 +233,7 @@ export default function Editor({
         const message = { role: 'user', content: post.content };
         context.push(message);
       });
+
       context.push({
         role: 'system',
         content: 'You can only respond in plaintext, do NOT use HTML.',
@@ -238,6 +252,7 @@ export default function Editor({
         const token = part.choices[0].delta.content;
         editor.commands.insertContent(token);
       }
+      removeNotification('reflecting');
       setIsAiResponding(false);
     }
   }, [editor, isAI]);
@@ -304,37 +319,39 @@ export default function Editor({
       )}
 
       <LinkPreviews post={post} />
-
-      <motion.div
-        initial={{ opacity: 0, x: 20 }}
-        animate={{ opacity: 1, x: 0 }}
-        transition={{ duration: 0.75 }}
-      >
-        <div
-          className={`${styles.media} ${
-            post?.data?.attachments.length > 0 ? styles.open : ''
-          }`}
+      <AnimatePresence>
+        <motion.div
+          key="attachments"
+          initial={{ opacity: 0, x: 20 }}
+          animate={{ opacity: 1, x: 0 }}
+          transition={{ duration: 0.75 }}
         >
           <div
-            className={`${styles.scroll} ${isNew && styles.new}`}
-            ref={elRef}
-            onMouseDown={handleMouseDown}
-            onMouseMove={handleMouseMove}
-            onMouseUp={handleMouseUp}
-            onMouseLeave={handleMouseUp}
+            className={`${styles.media} ${
+              post?.data?.attachments.length > 0 ? styles.open : ''
+            }`}
           >
-            <div className={styles.container}>
-              <Attachments
-                post={post}
-                editable={editable}
-                onRemoveAttachment={detachFromPost}
-              />
+            <div
+              className={`${styles.scroll} ${isNew && styles.new}`}
+              ref={elRef}
+              onMouseDown={handleMouseDown}
+              onMouseMove={handleMouseMove}
+              onMouseUp={handleMouseUp}
+              onMouseLeave={handleMouseUp}
+            >
+              <div className={styles.container}>
+                <AnimatePresence>
+                  <Attachments
+                    post={post}
+                    editable={editable}
+                    onRemoveAttachment={detachFromPost}
+                  />
+                </AnimatePresence>
+              </div>
             </div>
           </div>
-        </div>
-      </motion.div>
+        </motion.div>
 
-      <AnimatePresence>
         {editable && (
           <motion.div
             initial={{ opacity: 0, height: 0 }}

diff --git a/src/renderer/pages/Pile/Posts/Post/Ball/Ball.module.scss b/src/renderer/pages/Pile/Posts/Post/Ball/Ball.module.scss
@@ -105,7 +105,7 @@ button {
 .DropdownMenuSubTrigger {
     font-size: 13px;
     line-height: 1;
-    color: var(--violet-11);
+    color: var(--active-text);
     border-radius: 5px;
     display: flex;
     align-items: center;