feat: add tool search and update some styles

actions/gptscript.tsx

@@ -1,6 +1,6 @@
 "use server"
 
-import { Tool, Block } from '@gptscript-ai/gptscript';
+import { Tool, Block, Text } from '@gptscript-ai/gptscript';
 import { gpt } from '@/config/env';
 
 export const rootTool = async (toolContent: string): Promise<Tool> => {
@@ -16,6 +16,11 @@ export const parse = async (toolContent: string): Promise<Tool[]> => {
     return parsedTool.filter((block) => block.type === 'tool') as Tool[];
 }
 
+export const getTexts = async (toolContent: string): Promise<Text[]> => {
+    const parsedTool = await gpt().parseTool(toolContent);
+    return parsedTool.filter((block) => block.type === 'text');
+}
+
 export const stringify = async (script: Block[]): Promise<string> => {
     return gpt().stringify(script);
 }

app/explore/page.tsx

@@ -77,8 +77,7 @@ export default function Explore() {
 
     return (
         <div className="w-full px-10 h-full overflow-y-scroll mx-auto pt-10">
-            <div>
-                <div className="flex space-x-4 mb-4">
+            <div className="flex w-full justify-end space-x-2 mb-6">
                     <Select radius="lg" label="Owners" color="primary" isDisabled={!owners.length} size="sm" aria-label="owners" selectionMode="multiple" className="w-1/6" variant="bordered" classNames={{label: 'text-gray-500 dark:text-gray-400', value:'text-black dark:text-white'}}
                         onSelectionChange={(keys) => { setFilteredOwners(keys as Set<string>)}}
                     >
@@ -96,15 +95,14 @@ export default function Explore() {
                     >
                         {tags.map((tag) => <SelectItem key={tag} value={tag}>{tag}</SelectItem>)}
                     </Select>
-                </div>
                 <Input 
                     startContent={<GoSearch />}
                     placeholder="Search for an agent..."
                     color="primary"
                     variant="bordered"
                     isClearable
                     size="lg"
-                    className="w-full"
+                    className="w-1/5"
                     onChange={(e) => {
                         setQuery(e.target.value)
                         if (e.target.value === '') refresh()
@@ -116,7 +114,6 @@ export default function Explore() {
                     })}
                 />
             </div>
-            <Divider className="my-10"/>
             {loading ?
                 <Loading /> :
                 <div className={'pb-10'}>

app/page.tsx

@@ -17,7 +17,7 @@ function RunFile() {
                 <div className="border-t-1 dark:border-zinc-800" style={{width: `100vw`, height: `calc(100vh - 50px)`}}>
                     <div className="w-full h-full flex pb-10">
                         <Threads />
-                        <div className="mx-auto w-[75%] 2xl:w-[60%] 3xl:[w-50%]">
+                        <div className="mx-auto w-[75%] 2xl:w-[55%] 3xl:[w-50%]">
                             <Script 
                                 enableThreads 
                                 className="pb-10"

components/edit/configure/code.tsx

@@ -118,7 +118,7 @@ const Code = ({code, onChange, dependencies, onDependenciesChange}: CodeProps) =
                             <Editor
                                 height="35vh"
                                 language={LanguageSyntax[language]}
-                                theme={theme === "dark" ? "hc-black" : "vs-light"}
+                                theme={theme === "dark" ? "vs-dark" : "vs-light"}
                                 value={code}
                                 onChange={(code) => {onChange(code || '')}}
                                 options={{
@@ -153,7 +153,7 @@ const Code = ({code, onChange, dependencies, onDependenciesChange}: CodeProps) =
                                         height="100%"
                                         width="100%"
                                         language={LanguageSyntax[language]}
-                                        theme={theme === "dark" ? "hc-black" : "vs-light"}
+                                        theme={theme === "dark" ? "vs-dark" : "vs-light"}
                                         value={code}
                                         onChange={(code) => {onChange(code || '')}}
                                         options={{
@@ -191,7 +191,7 @@ const Code = ({code, onChange, dependencies, onDependenciesChange}: CodeProps) =
                                 <Editor
                                     height="35vh"
                                     language={LanguageDependencyFileSyntax[language]}
-                                    theme={theme === "dark" ? "hc-black" : "vs-light"}
+                                    theme={theme === "dark" ? "vs-dark" : "vs-light"}
                                     value={dependencies}
                                     onChange={(code) => {onDependenciesChange(code || '', languageDependencyFile(language))}}
                                     options={{
@@ -226,7 +226,7 @@ const Code = ({code, onChange, dependencies, onDependenciesChange}: CodeProps) =
                                             height="100%"
                                             width="100%"
                                             language={LanguageDependencyFileSyntax[language]}
-                                            theme={theme === "dark" ? "hc-black" : "vs-light"}
+                                            theme={theme === "dark" ? "vs-dark" : "vs-light"}
                                             value={code}
                                             onChange={(code) => {onChange(code || '')}}
                                             options={{

components/edit/configure/imports.tsx

@@ -27,11 +27,13 @@ const Imports: React.FC<ImportsProps> = ({tools, setTools, className, collapsed,
             setLocalTools(tools.filter((t) => !(
                 t.startsWith("https://")  ||
                 t.startsWith("http://")   ||
+                t.startsWith("sys.")      || // not local, but considered remote for the purposes of this component
                 t.startsWith("github.com")
             )));
             setRemoteTools(tools.filter((t) => 
                 t.startsWith("https://")  ||
                 t.startsWith("http://")   ||
+                t.startsWith("sys.")      || // not local, but considered remote for the purposes of this component
                 t.startsWith("github.com")
             ));
         }
@@ -75,7 +77,7 @@ const Imports: React.FC<ImportsProps> = ({tools, setTools, className, collapsed,
                             <div className="truncate w-full border-2 dark:border-zinc-700 text-sm pl-2 rounded-lg flex justify-between items-center">
                                 <div className="flex items-center space-x-2">
                                     {iconForTool(tool)}
-                                    <p className="capitalize">{tool.split("/").pop()?.replace(/-/g, " ")}</p>
+                                    <p className="capitalize">{tool.split("/").pop()?.replace(/-/g, " ").replace("sys.", "")}</p>
                                 </div>
                                 <Button
                                     variant="light"