feat(endpoints): add plugins selector to endpoints file

refactor(CodeBlock.tsx): refactor to typescript refactor(Plugin.tsx): use recoil Map for plugin name and refactor to typescript chore(Message.jsx): linting chore(PluginsOptions/index.jsx): remove comment/linting chore(svg): export Clipboard and CheckMark components from SVG index and refactor to typescript
danny-avila · danny-avila · Jul 16, 2023 · Jul 5, 2023 · Jul 9, 2023 · Jul 10, 2023
commit 1c7280d09b6ce8d5111020d64811cb94567cd906
diff --git a/client/src/components/Input/PluginsOptions/index.jsx b/client/src/components/Input/PluginsOptions/index.jsx
@@ -61,7 +61,6 @@ function PluginsOptions() {
 
   if (endpoint !== 'gptPlugins') return null;
   const models = endpointsConfig?.['gptPlugins']?.['availableModels'] || [];
-  // const availableTools = endpointsConfig?.['gptPlugins']?.['availableTools'] || [];
 
   const triggerAdvancedMode = () => setAdvancedMode((prev) => !prev);
 

diff --git a/...components/Messages/Content/CodeBlock.jsx → ...components/Messages/Content/CodeBlock.tsx b/...components/Messages/Content/CodeBlock.jsx → ...components/Messages/Content/CodeBlock.tsx
@@ -1,10 +1,15 @@
-import React, { useRef, useState } from 'react';
-import Clipboard from '~/components/svg/Clipboard';
-import CheckMark from '~/components/svg/CheckMark';
+import React, { useRef, useState, RefObject } from 'react';
+import { Clipboard, CheckMark } from '~/components';
 import { InfoIcon } from 'lucide-react';
 import { cn } from '~/utils/';
 
-const CodeBar = React.memo(({ lang, codeRef, plugin = null }) => {
+interface CodeBarProps {
+  lang: string;
+  codeRef: RefObject<HTMLElement>;
+  plugin?: boolean;
+}
+
+const CodeBar: React.FC<CodeBarProps> = React.memo(({ lang, codeRef, plugin = null }) => {
   const [isCopied, setIsCopied] = useState(false);
   return (
     <div className="relative flex items-center rounded-tl-md rounded-tr-md bg-gray-800 px-4 py-2 font-sans text-xs text-gray-200">
@@ -40,13 +45,20 @@ const CodeBar = React.memo(({ lang, codeRef, plugin = null }) => {
   );
 });
 
-const CodeBlock = ({ lang, codeChildren, classProp = '', plugin = null }) => {
-  const codeRef = useRef(null);
+interface CodeBlockProps {
+  lang: string;
+  codeChildren: string;
+  classProp?: string;
+  plugin?: boolean;
+}
+
+const CodeBlock: React.FC<CodeBlockProps> = ({ lang, codeChildren, classProp = '', plugin = null }) => {
+  const codeRef = useRef<HTMLElement>(null);
   const language = plugin ? 'json' : lang;
 
   return (
     <div className="rounded-md bg-black">
-      <CodeBar lang={lang} codeRef={codeRef} plugin={plugin} />
+      <CodeBar lang={lang} codeRef={codeRef} plugin={!!plugin} />
       <div className={cn(classProp, 'overflow-y-auto p-4')}>
         <code ref={codeRef} className={`hljs !whitespace-pre language-${language}`}>
           {codeChildren}

diff --git a/client/src/components/Messages/Message.jsx b/client/src/components/Messages/Message.jsx
@@ -2,7 +2,7 @@
 import { useState, useEffect, useRef } from 'react';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 import copy from 'copy-to-clipboard';
-import Plugin from './Plugin.jsx';
+import Plugin from './Plugin';
 import SubRow from './Content/SubRow';
 import Content from './Content/Content';
 import MultiMessage from './MultiMessage';

diff --git a/client/src/components/Messages/Plugin.jsx → client/src/components/Messages/Plugin.tsx b/client/src/components/Messages/Plugin.jsx → client/src/components/Messages/Plugin.tsx
@@ -1,11 +1,33 @@
-import { useState } from 'react';
+import React, { useState, useCallback, memo, ReactNode } from 'react';
 import { Spinner } from '~/components';
+import { useRecoilValue } from 'recoil';
 import CodeBlock from './Content/CodeBlock.jsx';
 import { Disclosure } from '@headlessui/react';
 import { ChevronDownIcon } from 'lucide-react';
 import { cn } from '~/utils/';
+import store from '~/store';
 
-function formatInputs(inputs) {
+interface Input {
+  inputStr: string;
+}
+
+interface PluginProps {
+  plugin: {
+    plugin: string;
+    input: string;
+    thought: string;
+    loading?: boolean;
+    outputs?: string;
+    latest?: string;
+    inputs?: Input[];
+  };
+}
+
+type PluginsMap = {
+  [pluginKey: string]: string;
+};
+
+function formatInputs(inputs: Input[]) {
   let output = '';
 
   for (let i = 0; i < inputs.length; i++) {
@@ -19,27 +41,46 @@ function formatInputs(inputs) {
   return output;
 }
 
-export default function Plugin({ plugin }) {
+const Plugin: React.FC<PluginProps> = ({ plugin }) => {
   const [loading, setLoading] = useState(plugin.loading);
   const finished = plugin.outputs && plugin.outputs.length > 0;
+  const plugins: PluginsMap = useRecoilValue(store.plugins);
+
+  const getPluginName = useCallback((currentTool: string) => {
+    const pluginKey = currentTool?.toLowerCase();
+    if (!pluginKey) {
+      return null;
+    }
 
-  if (!plugin.latest || (plugin.latest && plugin.latest.toLowerCase() === 'n/a')) {
+    if (pluginKey === 'n/a' || pluginKey === 'self reflection') {
+      return pluginKey;
+    }
+    return plugins[pluginKey] ?? 'self reflection';
+  }, [plugins]);
+
+  if (!plugin || !plugin.latest) {
+    return null;
+  }
+
+  const latestPlugin = getPluginName(plugin.latest);
+
+  if (!latestPlugin || (latestPlugin && latestPlugin === 'n/a')) {
     return null;
   }
 
   if (finished && loading) {
     setLoading(false);
   }
 
-  const generateStatus = () => {
-    if (!loading && plugin.latest === 'Self Reflection') {
+  const generateStatus = (): ReactNode => {
+    if (!loading && latestPlugin === 'self reflection') {
       return 'Finished';
-    } else if (plugin.latest === 'Self Reflection') {
+    } else if (latestPlugin === 'self reflection') {
       return 'I\'m  thinking...';
     } else {
       return (
         <>
-          {loading ? 'Using' : 'Used'} <b>{plugin.latest}</b>
+          {loading ? 'Using' : 'Used'} <b>{latestPlugin}</b>
           {loading ? '...' : ''}
         </>
       );
@@ -54,7 +95,7 @@ export default function Plugin({ plugin }) {
             <div
               className={cn(
                 loading ? 'bg-green-100' : 'bg-[#ECECF1]',
-                'flex items-center rounded p-3 text-sm text-gray-900',
+                'flex items-center rounded p-3 text-sm text-gray-900'
               )}
             >
               <div>
@@ -70,15 +111,15 @@ export default function Plugin({ plugin }) {
 
             <Disclosure.Panel className="my-3 flex max-w-full flex-col gap-3">
               <CodeBlock
-                lang={plugin.latest?.toUpperCase() || 'INPUTS'}
-                codeChildren={formatInputs(plugin.inputs)}
+                lang={latestPlugin?.toUpperCase() || 'INPUTS'}
+                codeChildren={formatInputs(plugin.inputs ?? [])}
                 plugin={true}
                 classProp="max-h-[450px]"
               />
               {finished && (
                 <CodeBlock
                   lang="OUTPUTS"
-                  codeChildren={plugin.outputs}
+                  codeChildren={plugin.outputs ?? ''}
                   plugin={true}
                   classProp="max-h-[450px]"
                 />
@@ -90,3 +131,5 @@ export default function Plugin({ plugin }) {
     </div>
   );
 }
+
+export default memo(Plugin);
diff --git a/client/src/components/svg/Clipboard.jsx → client/src/components/svg/Clipboard.tsx b/client/src/components/svg/Clipboard.jsx → client/src/components/svg/Clipboard.tsx
diff --git a/client/src/components/svg/index.ts b/client/src/components/svg/index.ts
@@ -3,6 +3,8 @@ export { default as GPTIcon } from './GPTIcon';
 export { default as CogIcon } from './CogIcon';
 export { default as Panel } from './Panel';
 export { default as Spinner } from './Spinner';
+export { default as Clipboard } from './Clipboard';
+export { default as CheckMark } from './CheckMark';
 export { default as MessagesSquared } from './MessagesSquared';
 export { default as StopGeneratingIcon } from './StopGeneratingIcon';
 export { default as GoogleIcon } from './GoogleIcon';

diff --git a/client/src/store/endpoints.js b/client/src/store/endpoints.js
@@ -13,6 +13,14 @@ const endpointsConfig = atom({
   },
 });
 
+const plugins = selector({
+  key: 'plugins',
+  get: ({  get }) => {
+    const config = get(endpointsConfig) || {};
+    return config?.gptPlugins?.plugins || {};
+  }
+});
+
 const endpointsFilter = selector({
   key: 'endpointsFilter',
   get: ({ get }) => {
@@ -35,6 +43,7 @@ const availableEndpoints = selector({
 // const modelAvailable
 
 export default {
+  plugins,
   endpointsConfig,
   endpointsFilter,
   availableEndpoints,