diff --git a/ui/user/src/app.css b/ui/user/src/app.css index 4640dd37f..e73ca29bc 100644 --- a/ui/user/src/app.css +++ b/ui/user/src/app.css @@ -15,7 +15,7 @@ } .icon-default { - @apply icon-default-size text-gray; + @apply icon-default-size; } body { @@ -31,7 +31,7 @@ body { } .button { - @apply button-layout button-colors; + @apply button-layout button-colors transition-colors duration-200; } .button-secondary-colors { @@ -124,6 +124,22 @@ html { @apply bg-surface3 text-on-surface3; } +.card { + @apply flex min-h-40 w-full gap-2 rounded-xl bg-surface1 transition-all duration-300 hover:-translate-y-2 hover:shadow-md; +} + +.card-icon-button-colors { + @apply bg-gray-100/35 text-on-surface1 transition-all duration-300 hover:bg-gray-100/75 focus:outline-none dark:bg-gray-900/25 dark:hover:bg-gray-900/75; +} + +.featured-card-layout { + @apply mb-8 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4; +} + +.card-layout { + @apply mb-8 grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-6; +} + textarea, input { @apply bg-background text-on-background; diff --git a/ui/user/src/lib/components/Search.svelte b/ui/user/src/lib/components/Search.svelte new file mode 100644 index 000000000..cff648515 --- /dev/null +++ b/ui/user/src/lib/components/Search.svelte @@ -0,0 +1,37 @@ + + +
+ + +
diff --git a/ui/user/src/lib/services/chat/operations.ts b/ui/user/src/lib/services/chat/operations.ts index abed73490..35f4279ac 100644 --- a/ui/user/src/lib/services/chat/operations.ts +++ b/ui/user/src/lib/services/chat/operations.ts @@ -25,7 +25,8 @@ import { type ProjectShareList, type ProjectAuthorizationList, type ProjectCredentialList, - type ProjectShare + type ProjectShare, + type ToolReferenceList } from './types'; export type Fetcher = typeof fetch; @@ -377,6 +378,14 @@ export async function createTool( return result; } +export async function listAllTools(opts?: { fetch: Fetcher }): Promise { + const list = (await doGet(`/tool-references?type=tool`, opts)) as ToolReferenceList; + if (!list.items) { + list.items = []; + } + return list; +} + export async function testTool( assistantID: string, projectID: string, diff --git a/ui/user/src/lib/services/chat/types.ts b/ui/user/src/lib/services/chat/types.ts index d94622d31..8929cbe1e 100644 --- a/ui/user/src/lib/services/chat/types.ts +++ b/ui/user/src/lib/services/chat/types.ts @@ -212,6 +212,19 @@ export interface AssistantToolList { items: AssistantTool[]; } +export interface ToolReference { + id: string; + name: string; + metadata?: { + icon?: string; + }; +} + +export interface ToolReferenceList { + readonly?: boolean; + items: ToolReference[]; +} + export interface Credential { toolName: string; icon: string; @@ -303,6 +316,7 @@ export interface Project { introductionMessage?: string; prompt?: string; editor?: boolean; + tools?: string[]; } export interface ProjectList { diff --git a/ui/user/src/routes/home/+page.svelte b/ui/user/src/routes/home/+page.svelte index 33ed33ef1..be0b8f620 100644 --- a/ui/user/src/routes/home/+page.svelte +++ b/ui/user/src/routes/home/+page.svelte @@ -1,11 +1,10 @@
@@ -52,81 +75,121 @@
{#snippet menu(project: Project)} -
- -
- - -
- -
- {/snippet} - -
-
-
-

My Obots

-
-
- {#each projects as project} - -
- - {project.name || 'Untitled'} -
- {#if project.description} -

This is a description

- {/if} - {@render menu(project)} - - {/each} + +
+
+ + {/snippet} - {#if data.shares.length > 0} -
-

Featured

+ {#snippet projectCard(project: Project | ProjectShare)} + +
+
+ {#if 'id' in project} + {@render menu(project)} + {/if}
-
- {#each data.shares as template} -
- -
- {template.name || 'Untitled'} - {#if template.description} -

This is a description

+
+
+ obot logo +
+
+
+

{project.name || 'Untitled'}

+

{project.description}

+ + {#if 'tools' in project && project.tools} +
+ {#each project.tools as tool} + {@const toolData = tools.get(tool)} +
+ {#if toolData?.metadata?.icon} + {toolData.name + {:else} + {/if}
-
- - - Launch - -
- {/each} + {/each} +
+ {:else} +
+ + {/if} +
+ + {/snippet} + +
+
+ + + {#if featured.length > 0 && !searchQuery} +
+

Featured

+
+ {#each featured as featuredShare} + {@render projectCard(featuredShare)} + {/each} +
{/if} + +
+

My Obots

+
+ {#if searchQuery} + {#each searchResults as project} + {@render projectCard(project)} + {/each} + {#if searchResults.length === 0} +

No results found.

+ {/if} + {:else} + {#each [...projects, ...shares] as project} + {@render projectCard(project)} + {/each} + + {/if} +
+
@@ -147,3 +210,7 @@ }} oncancel={() => (toDelete = undefined)} /> + + + Obot | Home + diff --git a/ui/user/src/routes/home/+page.ts b/ui/user/src/routes/home/+page.ts index b383bc6dd..070f556b5 100644 --- a/ui/user/src/routes/home/+page.ts +++ b/ui/user/src/routes/home/+page.ts @@ -5,14 +5,17 @@ export const load: PageLoad = async ({ fetch }) => { try { const editorProjects = ChatService.listProjects({ fetch }); const shares = ChatService.listProjectShares({ fetch }); + const tools = ChatService.listAllTools({ fetch }); return { editorProjects: (await editorProjects).items, - shares: (await shares).items + shares: (await shares).items, + tools: (await tools).items }; } catch { return { editorProjects: [], - shares: [] + shares: [], + tools: [] }; } }; diff --git a/ui/user/static/agent/images/mork_borg.jpeg b/ui/user/static/agent/images/mork_borg.jpeg new file mode 100644 index 000000000..0dec1eaa0 Binary files /dev/null and b/ui/user/static/agent/images/mork_borg.jpeg differ diff --git a/ui/user/static/agent/images/placeholder.jpeg b/ui/user/static/agent/images/placeholder.jpeg new file mode 100644 index 000000000..e9522347c Binary files /dev/null and b/ui/user/static/agent/images/placeholder.jpeg differ