Fix: Fix creation bugs to make slug unique.

actions/common.tsx

@@ -42,4 +42,4 @@ export async function request<T>(obj: T, path: string, method: string): Promise<
     }
 
     return res
-}
+}

actions/me/scripts.tsx

@@ -1,7 +1,6 @@
 "use server"
 
 import {create, del, get, list, update} from "@/actions/common"
-import { getMe } from "@/actions/me/me"
 import { GATEWAY_URL, gpt } from "@/config/env"
 import { Block } from "@gptscript-ai/gptscript"
 
@@ -68,7 +67,7 @@ export async function getScripts(query?: ScriptsQuery): Promise<ParsedScriptsQue
     for (const script of scripts.scripts || []) {
         const parsedScript = await gpt().parseTool(script.content || '');
 
-        parsedScripts.push({ ...script, 
+        parsedScripts.push({ ...script,
             script: parsedScript,
             description: getDescription(parsedScript),
             agentName: getName(parsedScript)
@@ -114,16 +113,3 @@ export async function getScriptContent(scriptURL: string): Promise<string | unde
         return undefined;
     }
 }
-
-export async function getNewScriptName() {
-    const me = await getMe();
-    const scripts = await getScripts({ owner: me.username, search: 'New Assistant' });
-    let latestAssistant = 0;
-    for (let script of scripts.scripts || []) {
-        if (script.displayName?.includes('New Assistant')) {
-            const assistantNumber = parseInt(script.displayName?.split('New Assistant ')[1] || '1');
-            if (assistantNumber > latestAssistant) latestAssistant = assistantNumber;
-        }
-    }
-    return `New Assistant ${latestAssistant + 1}`;
-}

app/edit/page.tsx

@@ -9,12 +9,13 @@ import {ScriptContextProvider} from "@/contexts/script";
 import New from "@/components/edit/new";
 import ScriptNav from "@/components/edit/scriptNav";
 import { NavContext } from "@/contexts/nav";
+import { AuthContextProvider } from '@/contexts/auth';
 
 function EditFile() {
     const [file, setFile] = useState<string>(useSearchParams().get('file') || '');
     const [scriptId, setScriptId] = useState<string>(useSearchParams().get('id') || '');
     const [collapsed, setCollapsed] = useState(false);
-    
+
     const {setCurrent} = useContext(NavContext);
     useEffect(() => setCurrent('/build'), [])
 
@@ -23,7 +24,7 @@ function EditFile() {
             <div className="absolute left-2 top-2">
                 <ScriptNav collapsed={collapsed} setCollapsed={setCollapsed}/>
             </div>
-            <New 
+            <New
                 className="w-1/2"
                 setFile={setFile}
             />
@@ -51,4 +52,4 @@ export default function Edit() {
             <EditFile/>
         </Suspense>
     )
-}
+}

app/explore/page.tsx

@@ -68,23 +68,22 @@ export default function Explore() {
         })
             .then((resp) => {
                 setNext(resp.continue)
-                setScripts(resp.scripts || []) 
+                setScripts(resp.scripts || [])
                 setFilteredScripts(resp.scripts || [])
             })
             .catch((error) => console.error(error))
             .finally(() => setLoading(false));
     }, [query, filter, owner, visibility]);
 
-    useEffect(() => {   
-        refresh()
-    }, [query, filter, owner, visibility]);
-
-    useEffect(() => { 
+    useEffect(() => {
         setCurrent('/explore')
-        refresh() 
     }, []);
 
-    useEffect(() => { refresh() }, [authenticated]);;
+    useEffect(() => {
+        if (authenticated) {
+            refresh();
+        }
+    }, [authenticated, query, filter, owner, visibility]);
 
     return (
         <div className="w-full px-20 h-full overflow-y-scroll mx-auto pt-10">
@@ -147,7 +146,7 @@ export default function Explore() {
                             }
                         }}
                     />
-                    <Input 
+                    <Input
                         startContent={<GoSearch />}
                         placeholder="Search for assistant content..."
                         color="primary"
@@ -180,8 +179,8 @@ export default function Explore() {
                                     setOpen(true)
                                 }}
                             >
-                                <Card 
-                                    className="h-[350px] border-2 border-white dark:bg-zinc-900 p-6 dark:border-zinc-900 hover:border-primary hover:shadow-2xl dark:hover:border-primary cursor-pointer transition duration-300 ease-in-out transform hover:scale-105" 
+                                <Card
+                                    className="h-[350px] border-2 border-white dark:bg-zinc-900 p-6 dark:border-zinc-900 hover:border-primary hover:shadow-2xl dark:hover:border-primary cursor-pointer transition duration-300 ease-in-out transform hover:scale-105"
                                     key={script.displayName}
                                     shadow="md"
                                 >
@@ -198,7 +197,7 @@ export default function Explore() {
                                             </div>
                                         </div>
                                         <div className="flex space-x-1 w-[90%] overflow-x-auto pt-10 pb-2">
-                                            {script.tags?.map((tag) => 
+                                            {script.tags?.map((tag) =>
                                                 <Chip size="sm" className="pb-0 mb-0" key={tag}>{tag}</Chip>
                                             )}
                                         </div>
@@ -210,11 +209,11 @@ export default function Explore() {
                                 </Card>
                             </div>
                         ))}
-                        {next && 
+                        {next &&
                             <Button
                                 isLoading={nextLoading}
-                                color="primary" 
-                                size="lg" 
+                                color="primary"
+                                size="lg"
                                 className="col-span-1 lg:col-span-2 2xl:col-span-3 4xl:col-span-4"
                                 onPress={() => {
                                     setNextLoading(true)

app/page.tsx

@@ -22,8 +22,9 @@ function RunFile() {
                     <div className="w-full h-full flex pb-10">
                         <Threads />
                         <div className="mx-auto w-[75%] 2xl:w-[55%] 3xl:[w-50%]">
-                            <Script 
-                                enableThreads 
+                            <Script
+                                enableThreads
+                                showAssistantName
                                 className="pb-10"
                             />
                         </div>

components/edit/configure.tsx

@@ -153,4 +153,4 @@ const Configure: React.FC<ConfigureProps> = ({className, collapsed}) => {
     );
 };
 
-export default Configure;
+export default Configure;

components/edit/scriptNav.tsx

@@ -32,7 +32,7 @@ const ScriptNav: React.FC<ScriptNavProps> = ({className, collapsed, setCollapsed
     const ScriptItems = scripts && scripts.length ?
         scripts.map((script, i) => (
             <DropdownItem startContent={<GoPerson className="mb-1"/>} key={script.publicURL}>{script.agentName || `Untitled Assistant ${i}`}</DropdownItem>
-        )) : 
+        )) :
         <DropdownItem key={'no-files'} isReadOnly>No files found</DropdownItem>;
 
     return (
@@ -42,9 +42,9 @@ const ScriptNav: React.FC<ScriptNavProps> = ({className, collapsed, setCollapsed
                     <IoMenu/>
                 </Button>
             </DropdownTrigger>
-            <DropdownMenu 
-                aria-label="edit" 
-                onAction={(key) => { 
+            <DropdownMenu
+                aria-label="edit"
+                onAction={(key) => {
                     if (key === 'collapse') {
                         setCollapsed && setCollapsed(!collapsed);
                     } else if (key === 'export') {
@@ -76,4 +76,4 @@ const ScriptNav: React.FC<ScriptNavProps> = ({className, collapsed, setCollapsed
     );
 }
 
-export default ScriptNav
+export default ScriptNav

components/script.tsx

@@ -13,16 +13,18 @@ import {ScriptContext} from "@/contexts/script";
 import AssistantNotFound from "@/components/assistant-not-found"
 
 interface ScriptProps {
-	className?: string
-	messagesHeight?: string
+	  className?: string
+	  messagesHeight?: string
     enableThreads?: boolean
+    showAssistantName?: boolean
 }
 
-const Script: React.FC<ScriptProps> = ({ className, messagesHeight = 'h-full', enableThreads }) => {
+const Script: React.FC<ScriptProps> = ({ className, messagesHeight = 'h-full', enableThreads, showAssistantName }) => {
     const inputRef = useRef<HTMLInputElement>(null);
     const [inputValue, setInputValue] = useState<string>("");
     const {
         script,
+        scriptDisplayName,
         tool,
         showForm,
         setShowForm,
@@ -99,9 +101,11 @@ const Script: React.FC<ScriptProps> = ({ className, messagesHeight = 'h-full', e
 
     return (
         <div className={`h-full w-full ${className}`}>
+            {showAssistantName && <h1
+              className="px-6 pt-10 text-2xl font-medium truncate">{scriptDisplayName ?? ''}</h1>}
             {(connected && running) || (showForm && hasParams) ? (<>
                 <div
-                    id="small-message"
+                  id="small-message"
                     className={`px-6 pt-10 overflow-y-auto w-full items-center ${messagesHeight}`}
                 >
                     {showForm && hasParams ? (

components/scripts.tsx

@@ -43,7 +43,11 @@ export default function Scripts() {
         return firstLetters.slice(0, 2).join('').toUpperCase();
     }
 
-    useEffect(() => { refresh() }, [authenticated, me]);
+    useEffect(() => {
+        if (authenticated && me) {
+            refresh();
+        }
+    }, [authenticated, me]);
 
     const ScriptItems = () => authenticated ? (
         <div className="grid grid-cols-1 lg:grid-cols-2 2xl:grid-cols-3 4xl:grid-cols-4 w-full gap-10">
@@ -74,7 +78,7 @@ export default function Scripts() {
                         >
                             Chat
                         </Button>
-                        { me?.username === script.owner && 
+                        { me?.username === script.owner &&
                             <>
                                 <Button
                                     className="w-full"
@@ -97,7 +101,7 @@ export default function Scripts() {
                                 >
                                     Delete
                                 </Button>
-                                    
+
                             </>
                         }
                     </CardFooter>

components/scripts/create.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import {Popover, PopoverTrigger, PopoverContent, Button, Input} from "@nextui-org/react";
 import { VscNewFile } from "react-icons/vsc";
 import { GoPaperAirplane, GoPersonAdd } from "react-icons/go";
-import { createScript, getNewScriptName, getScript } from "@/actions/me/scripts";
+import { createScript, getScript } from "@/actions/me/scripts";
 
 const newDefaultAssistant = (name: string): string => {
     return `
@@ -17,22 +17,22 @@ export default function Create() {
     const [loading, setLoading] = React.useState(false);
 
     const handleSubmit = async () => {
-        getNewScriptName()
-            .then((name) => {
-                createScript({
-                    displayName: name,
-                    visibility: "private",
-                    content: newDefaultAssistant(name),
-                }).then((script) => {
-                    getScript(`${script.id}`)
-                        .then((script) =>
-                            window.location.href = `/edit?file=${script?.publicURL}&id=${script?.id}`
-                        );
-                })
-            })
+        const defaultName = "New Assistant";
+        const slug = defaultName.toLowerCase().replace(" ", "-") + "-" + Math.random().toString(36).substring(2, 7);
+        createScript({
+            displayName: defaultName,
+            slug,
+            visibility: "private",
+            content: newDefaultAssistant(defaultName),
+        }).then((script) => {
+            getScript(`${script.id}`)
+                .then((script) =>
+                    window.location.href = `/edit?file=${script?.publicURL}&id=${script?.id}`
+                );
+        })
     };
 
-  
+
     return (
         <Button
             isLoading={loading}

components/threads/new.tsx

@@ -15,9 +15,9 @@ const NewThread = ({className}: NewThreadProps) => {
     const [loading, setLoading] = useState(true);
     const {
         workspace,
-        setThread, 
-        setSelectedThreadId, 
-        setScript, 
+        setThread,
+        setSelectedThreadId,
+        setScript,
         setThreads,
         scriptId,
     } = useContext(ScriptContext);
@@ -29,7 +29,6 @@ const NewThread = ({className}: NewThreadProps) => {
         setScripts(resp.scripts || []);
     }
 
-    useEffect(() => { fetchScripts() }, []);
     useEffect(() => { fetchScripts() }, [isOpen]);
 
     const handleCreateThread = (script: string) => {
@@ -51,12 +50,12 @@ const NewThread = ({className}: NewThreadProps) => {
                 <Menu aria-label="my-scripts">
                     <MenuSection aria-label={"my-scripts"} title="Select a script">
                         {scripts.map((script, i) => (
-                            <MenuItem 
-                                aria-label={script.displayName} 
+                            <MenuItem
+                                aria-label={script.displayName}
                                 key={i} color="primary"
-                                className="py-2 truncate max-w-[200px]" 
-                                content={script.displayName} 
-                                onClick={() => { 
+                                className="py-2 truncate max-w-[200px]"
+                                content={script.displayName}
+                                onClick={() => {
                                     handleCreateThread(script.publicURL!); setIsOpen(false)
                                 }}
                             >
@@ -70,4 +69,4 @@ const NewThread = ({className}: NewThreadProps) => {
     );
 };
 
-export default NewThread;
+export default NewThread;