ImportModal

.ui-dev/package.json

@@ -26,6 +26,7 @@
     "del-cli": "5.0.0",
     "lodash": "4.17.21",
     "move-file-cli": "3.0.0",
+    "node-html-parser": "6.1.5",
     "postcss": "8.4.27",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -36,6 +37,7 @@
     "rehype-mathjax": "4.0.3",
     "remark-gfm": "3.0.1",
     "remark-math": "5.1.1",
+    "striptags": "3.2.0",
     "tailwindcss": "3.3.3",
     "tsx": "3.12.7",
     "typescript": "4.9.5",
@@ -68,4 +70,4 @@
       "last 1 safari version"
     ]
   }
-}
+}

.ui-dev/server.ts

@@ -14,11 +14,12 @@
 // along with this program. If not, see <http://www.gnu.org/licenses/>.
 
 import _ from 'lodash';
+import axios from 'axios';
 import cors from 'cors';
 import fs from 'node:fs';
 import path from 'node:path';
 import { promisify } from 'node:util';
-import { createServer, json } from '@egomobile/http-server';
+import { createServer, json, query } from '@egomobile/http-server';
 
 interface IChatBody {
     conversation: string[];
@@ -133,6 +134,28 @@ async function main() {
         response.write(data);
     });
 
+    app.get('/api/download', {
+        autoEnd: false,
+        use: [query()]
+    }, async (request, response) => {
+        let downloadUrl = request.query!.get('u')!.trim();
+        if (!downloadUrl.startsWith('http')) {
+            downloadUrl = `https://${downloadUrl}`;
+        }
+
+        const {
+            data, headers, status
+        } = await axios.get<NodeJS.ReadableStream>(downloadUrl, {
+            responseType: 'stream'
+        });
+
+        response.writeHead(status, {
+            ...(headers as any)
+        });
+
+        data.pipe(response);
+    });
+
     await app.listen(8181);
 
     console.log('ℹ️ Mock server now running on port', app.port);

.ui-dev/src/components/Chat/components/ChatInput/index.tsx

@@ -20,6 +20,7 @@ import {
   IconArrowDown,
   IconRepeat,
   IconSend,
+  IconFileDownload,
 
   TablerIconsProps,
   IconDots,
@@ -30,6 +31,7 @@ import {
 import type { Nullable, Optional } from '@egomobile/types';
 
 // internal imports
+import ImportModal from '../../../ImportModal';
 import PromptList from '../PromptList';
 import useAppContext from '../../../../hooks/useAppContext';
 import VariableModal from '../VariableModal';
@@ -74,6 +76,7 @@ const ChatInput = ({
   const [isTyping, setIsTyping] = useState<boolean>(false);
   const [promptInputValue, setPromptInputValue] = useState('');
   const [sendIconIndex, setSendIconIndex] = useState<Nullable<number>>(null);
+  const [showImportModal, setShowImportModal] = useState(false);
   const [showPluginSelect, setShowPluginSelect] = useState(false);
   const [showPromptList, setShowPromptList] = useState(false);
   const [variables, setVariables] = useState<IVariable[]>([]);
@@ -256,7 +259,7 @@ const ChatInput = ({
     return (
       <textarea
         ref={textareaRef}
-        className="m-0 w-full resize-none border-0 bg-transparent p-0 py-2 pr-8 pl-4 text-black dark:bg-transparent dark:text-white md:py-3 md:pl-4"
+        className="m-0 w-full resize-none border-0 bg-transparent p-0 py-2 pr-16 pl-4 text-black dark:bg-transparent dark:text-white md:py-3 md:pl-4"
         disabled={isInputDiabled}
         style={{
           resize: 'none',
@@ -311,6 +314,25 @@ const ChatInput = ({
     );
   }, [canSend, handleSend, isInputDiabled, sendIconIndex]);
 
+  const renderImportButton = useCallback(() => {
+    if (isInputDiabled) {
+      return null;
+    }
+
+    const iconContainerClassName = "absolute right-8 top-2 rounded-sm p-1 text-neutral-800 opacity-60 dark:bg-opacity-50 dark:text-neutral-100";
+
+    return (
+      <button
+        className={clsx(iconContainerClassName, 'cursor-pointer')}
+        onClick={() => {
+          setShowImportModal(true);
+        }}
+      >
+        <IconFileDownload size={18} />
+      </button>
+    );
+  }, [isInputDiabled]);
+
   const renderRegenerateButton = useCallback(() => {
     if (isSending || !selectedConversation?.messages?.length) {
       return null;
@@ -326,13 +348,33 @@ const ChatInput = ({
     );
   }, [isSending, onRegenerate, selectedConversation?.messages?.length]);
 
+  const renderImportModal = useCallback(() => {
+    if (!showImportModal) {
+      return null;
+    }
+
+    return (
+      <ImportModal
+        onClose={(contentToAdd) => {
+          if (contentToAdd !== null) {
+            setContent(content + contentToAdd);
+          }
+
+          setShowImportModal(false);
+        }}
+      />
+    );
+  }, [content, showImportModal]);
+
   const renderContent = useCallback(() => {
     return (
       <div className="stretch mx-2 mt-4 flex flex-row gap-3 last:mb-2 md:mx-4 md:mt-[52px] md:last:mb-6 lg:mx-auto lg:max-w-3xl">
         {renderRegenerateButton()}
 
         <div className="relative mx-2 flex w-full flex-grow flex-col rounded-md border border-black/10 bg-white shadow-[0_0_10px_rgba(0,0,0,0.10)] dark:border-gray-900/50 dark:bg-[#40414F] dark:text-white dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] sm:mx-4">
           {renderInputField()}
+
+          {renderImportButton()}
           {renderSendButton()}
 
           {showScrollDownButton && (
@@ -369,7 +411,7 @@ const ChatInput = ({
         </div>
       </div>
     );
-  }, [activePromptIndex, filteredPrompts, handleInitModal, handleSubmit, isModalVisible, onScrollDownClick, renderInputField, renderRegenerateButton, renderSendButton, showPromptList, showScrollDownButton, variables]);
+  }, [activePromptIndex, filteredPrompts, handleInitModal, handleSubmit, isModalVisible, onScrollDownClick, renderImportButton, renderInputField, renderRegenerateButton, renderSendButton, showPromptList, showScrollDownButton, variables]);
 
   useEffect(() => {
     if (promptListRef.current) {
@@ -439,6 +481,8 @@ const ChatInput = ({
         </a>
         {" is a command line tool that interacts with OpenAI's ChatGPT, without additional software."}
       </div>
+
+      {renderImportModal()}
     </div>
   );
 };