feat(UI): Text prompt (open-edge-platform#822)

Author: ActiveChooN

application/ui/src/api/index.ts

@@ -57,6 +57,7 @@ export {
     type SchemaVisualPromptSchema as VisualPromptType,
     type SchemaPromptsListSchema as VisualPromptListType,
     type SchemaVisualPromptListItemSchema as VisualPromptItemType,
+    type SchemaTextPromptSchema as TextPromptType,
     type SchemaFrameMetadata as FrameAPIType,
     type SchemaFrameListResponse as FramesResponseType,
     type SchemaSinkCreateSchema as SinkCreateType,

application/ui/src/features/prompts/prompt-modes/prompt-mode.component.tsx

@@ -3,17 +3,13 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { usePromptMode } from '@/hooks';
+
+import { TextPrompt } from '../text-prompt/text-prompt.component';
 import { VisualPromptProvider } from '../visual-prompt/visual-prompt-provider.component';
 import { VisualPrompt } from '../visual-prompt/visual-prompt.component';
 
 export const PromptMode = () => {
-    return (
-        <VisualPromptProvider>
-            <VisualPrompt />
-        </VisualPromptProvider>
-    );
-
-    /* TODO: Uncomment when we support text prompt
     const [mode] = usePromptMode();
 
     if (mode === 'visual') {
@@ -24,5 +20,5 @@ export const PromptMode = () => {
         );
     }
 
-    return <TextPrompt />;*/
+    return <TextPrompt />;
 };

application/ui/src/features/prompts/prompt.component.tsx

@@ -3,10 +3,11 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { Flex, Heading, View } from '@geti/ui';
+import { Divider, Flex, Heading, View } from '@geti/ui';
 
 import { ModelToolbar } from './models/model-toolbar/model-toolbar.component';
 import { PromptMode } from './prompt-modes/prompt-mode.component';
+import { PromptModes } from './prompt-modes/prompt-modes.component';
 
 export const Prompt = () => {
     return (
@@ -22,11 +23,9 @@ export const Prompt = () => {
                 <Heading margin={0}>Prompt</Heading>
                 <View padding={'size-300'} flex={1}>
                     <Flex direction={'column'} gap={'size-300'} height={'100%'}>
-                        {/* TODO: Uncomment when we support text prompt
-                            <PromptModes />
+                        <PromptModes />
 
-                            <Divider size={'S'} />
-                        */}
+                        <Divider size={'S'} />
 
                         <Flex flex={1} direction={'column'} gap={'size-200'}>
                             <ModelToolbar />

application/ui/src/features/prompts/text-prompt/api/use-text-prompts.ts

@@ -0,0 +1,60 @@
+/**
+ * Copyright (C) 2025 Intel Corporation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { $api, TextPromptType } from '@/api';
+import { useProjectIdentifier } from '@/hooks';
+import { toast } from '@geti/ui';
+
+export const useGetTextPrompts = (): TextPromptType[] => {
+    const { projectId } = useProjectIdentifier();
+
+    const { data } = $api.useSuspenseQuery('get', '/api/v1/projects/{project_id}/prompts', {
+        params: { path: { project_id: projectId } },
+    });
+
+    return (data.prompts ?? []).filter((prompt): prompt is TextPromptType => prompt.type === 'TEXT');
+};
+
+export const useCreateTextPrompt = () => {
+    const { projectId } = useProjectIdentifier();
+
+    return $api.useMutation('post', '/api/v1/projects/{project_id}/prompts', {
+        meta: {
+            invalidates: [
+                ['get', '/api/v1/projects/{project_id}/prompts', { params: { path: { project_id: projectId } } }],
+            ],
+            error: {
+                notify: true,
+            },
+        },
+        onSuccess: () => {
+            toast({
+                type: 'success',
+                message: 'Prompt created successfully.',
+            });
+        },
+    });
+};
+
+export const useDeleteTextPrompt = () => {
+    const { projectId } = useProjectIdentifier();
+
+    return $api.useMutation('delete', '/api/v1/projects/{project_id}/prompts/{prompt_id}', {
+        meta: {
+            invalidates: [
+                ['get', '/api/v1/projects/{project_id}/prompts', { params: { path: { project_id: projectId } } }],
+            ],
+            error: {
+                notify: true,
+            },
+        },
+        onSuccess: () => {
+            toast({
+                type: 'success',
+                message: 'Prompt deleted successfully.',
+            });
+        },
+    });
+};

application/ui/src/features/prompts/text-prompt/text-prompt-badge/text-prompt-badge.component.tsx

@@ -0,0 +1,40 @@
+/**
+ * Copyright (C) 2025 Intel Corporation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { CSSProperties } from 'react';
+
+import { TextPromptType } from '@/api';
+import { ActionButton, Text } from '@geti/ui';
+import { Close } from '@geti/ui/icons';
+import { getDistinctColorBasedOnHash } from '@geti/ui/utils';
+
+import classes from './text-prompt-badge.module.scss';
+
+type TextPromptBadgeProps = {
+    prompt: TextPromptType;
+    onDelete: (id: string) => void;
+};
+
+export const TextPromptBadge = ({ prompt, onDelete }: TextPromptBadgeProps) => {
+    const color = getDistinctColorBasedOnHash(prompt.id);
+
+    return (
+        <div
+            className={classes.badge}
+            style={{ '--badgeBgColor': color } as CSSProperties}
+            aria-label={`Text prompt: ${prompt.content}`}
+        >
+            <Text UNSAFE_className={classes.badgeText}>{prompt.content}</Text>
+            <ActionButton
+                isQuiet
+                aria-label={`Delete prompt: ${prompt.content}`}
+                onPress={() => onDelete(prompt.id)}
+                UNSAFE_className={classes.deleteButton}
+            >
+                <Close />
+            </ActionButton>
+        </div>
+    );
+};

application/ui/src/features/prompts/text-prompt/text-prompt-badge/text-prompt-badge.module.scss

@@ -0,0 +1,42 @@
+.badge {
+    --foregroundColor: lch(from var(--badgeBgColor) calc((50 - l) * infinity) 0 0);
+    --spectrum-high-contrast-button-text: var(--foregroundColor);
+
+    background-color: var(--badgeBgColor);
+    border-radius: var(--spectrum-alias-border-radius-regular);
+    padding: var(--spectrum-global-dimension-size-50) var(--spectrum-global-dimension-size-100);
+    display: flex;
+    align-items: center;
+    gap: var(--spectrum-global-dimension-size-50);
+    width: fit-content;
+    min-height: var(--spectrum-global-dimension-size-400);
+    transition: padding 0.2s;
+
+    & .deleteButton {
+        opacity: 0;
+        transition:
+            opacity 0.2s,
+            width 0.2s;
+        overflow: hidden;
+        min-width: unset;
+        width: 0;
+        height: var(--spectrum-global-dimension-size-300);
+        color: var(--foregroundColor);
+        border-radius: var(--spectrum-alias-border-radius-regular);
+    }
+}
+
+.badge:hover,
+.badge:focus-within {
+    & .deleteButton {
+        opacity: 1;
+        background-color: color-mix(in srgb, var(--foregroundColor), transparent 80%) !important;
+        width: var(--spectrum-global-dimension-size-300);
+    }
+}
+
+.badgeText {
+    color: var(--foregroundColor);
+    white-space: pre-wrap;
+    word-break: break-word;
+}

application/ui/src/features/prompts/text-prompt/text-prompt.component.tsx

@@ -3,37 +3,89 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { useState } from 'react';
+import { KeyboardEvent, Suspense, useState } from 'react';
 
-import { Button, Flex, TextArea, View } from '@geti/ui';
+import { useProjectIdentifier } from '@/hooks';
+import { ActionButton, Flex, Loading, Text, TextArea } from '@geti/ui';
+import { Add } from '@geti/ui/icons';
+
+import { useCreateTextPrompt, useDeleteTextPrompt, useGetTextPrompts } from './api/use-text-prompts';
+import { TextPromptBadge } from './text-prompt-badge/text-prompt-badge.component';
+
+import classes from './text-prompt.module.scss';
+
+const TextPromptBadgeList = () => {
+    const prompts = useGetTextPrompts();
+    const { projectId } = useProjectIdentifier();
+    const deleteMutation = useDeleteTextPrompt();
+
+    const handleDelete = (promptId: string) => {
+        deleteMutation.mutate({
+            params: { path: { project_id: projectId, prompt_id: promptId } },
+        });
+    };
+
+    if (prompts.length === 0) {
+        return <Text UNSAFE_className={classes.emptyState}>No text prompts yet.</Text>;
+    }
+
+    return (
+        <Flex direction={'column'} gap={'size-100'}>
+            {prompts.map((prompt) => (
+                <TextPromptBadge key={prompt.id} prompt={prompt} onDelete={handleDelete} />
+            ))}
+        </Flex>
+    );
+};
 
 export const TextPrompt = () => {
-    const [prompt, setPrompt] = useState<string>('Enter your text prompt here');
+    const [content, setContent] = useState('');
+    const { projectId } = useProjectIdentifier();
+    const createMutation = useCreateTextPrompt();
+
+    const isSubmitDisabled = content.trim() === '' || createMutation.isPending;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+        if (e.key === 'Enter' && (e.ctrlKey || e.metaKey || !e.shiftKey)) {
+            e.preventDefault();
+            if (!isSubmitDisabled) handleAddTextPrompt();
+        }
+    };
+
+    const handleAddTextPrompt = () => {
+        const trimmed = content.trim();
+
+        if (!trimmed) return;
 
-    const isSubmitDisabled = prompt.trim() === '';
+        createMutation.mutate(
+            {
+                body: { type: 'TEXT', content: trimmed },
+                params: { path: { project_id: projectId } },
+            },
+            {
+                onSuccess: () => setContent(''),
+            }
+        );
+    };
 
     return (
-        <View height={'100%'}>
-            <View
-                backgroundColor={'gray-50'}
-                padding={'size-100'}
-                borderRadius={'regular'}
-                height={'100%'}
-                maxHeight={'size-3000'}
-            >
+        <Flex direction={'column'} gap={'size-200'}>
+            <Flex gap={'size-100'} alignItems={'end'}>
                 <TextArea
-                    aria-label={'Text prompt'}
-                    value={prompt}
-                    onChange={setPrompt}
-                    width={'100%'}
-                    height={'100%'}
+                    aria-label={'New text prompt'}
+                    placeholder={'e.g. red car'}
+                    value={content}
+                    onChange={setContent}
+                    onKeyDown={handleKeyDown}
+                    flex={1}
                 />
-            </View>
-            <Flex justifyContent={'end'}>
-                <Button marginTop={'size-200'} isDisabled={isSubmitDisabled}>
-                    Submit
-                </Button>
+                <ActionButton isDisabled={isSubmitDisabled} onPress={handleAddTextPrompt} aria-label={'Add prompt'}>
+                    <Add />
+                </ActionButton>
             </Flex>
-        </View>
+            <Suspense fallback={<Loading mode={'inline'} size={'M'} />}>
+                <TextPromptBadgeList />
+            </Suspense>
+        </Flex>
     );
 };

application/ui/src/features/prompts/text-prompt/text-prompt.module.scss

@@ -0,0 +1,3 @@
+.emptyState {
+    color: var(--spectrum-global-color-gray-600);
+}