@admin-layout/gluestack-ui-mobile 12.2.4-alpha.4 → 12.2.4-alpha.49

package/src/components/InputToolBar/README.md

@@ -0,0 +1,239 @@
+# InputToolBar (Mobile)
+
+A **UI-only** horizontal toolbar for text-input UIs on mobile (e.g. chat, composer, search). Built with gluestack-ui and NativeWind. All data and behavior come from props; the component does not know about modes, methods, or app logic.
+
+## Layout
+
+When `inputConfig` or `children` is provided:
+
+- **First row**: Optional `topContent`, then built-in TextInput (if `inputConfig` is set) or `children`.
+- **Second row**: Left section (`leftItems` + optional `templateButton`) and right section (`rightItems` + optional `micSendButton`).
+
+When neither is provided, a single toolbar row is rendered. Parent passes `leftItems` and `rightItems` with full config (e.g. `active`, `onClick`, `enabled`) and optional helpers `getDefaultLeftItems` / `getDefaultRightItems`.
+
+## Installation
+
+The component is part of `@admin-layout/gluestack-ui-mobile`:
+
+```ts
+import { InputToolBar, getDefaultLeftItems, getDefaultRightItems } from '@admin-layout/gluestack-ui-mobile';
+```
+
+## Props
+
+All data and behavior are passed from the parent. No internal mode or method logic.
+
+| Prop                          | Type                                        | Description                                                                                                                                                                                  |
+| ----------------------------- | ------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `className`                   | `string`                                    | Optional class for the toolbar container (merged with `classNames.container`).                                                                                                               |
+| `classNames`                  | `InputToolBarClassNames`                    | Optional class overrides per section for theme (light/dark) or custom styling.                                                                                                               |
+| `inputConfig`                 | `InputConfig \| null`                       | When set, a built-in TextInput is rendered; pass value, onChange, etc.                                                                                                                       |
+| `topContent`                  | `ReactNode`                                 | Rendered above the input when `inputConfig` is set.                                                                                                                                          |
+| `leftItems`                   | `ToolbarItemConfig<LeftToolbarItemId>[]`    | Left section items (active, onClick, etc. from parent).                                                                                                                                      |
+| `rightItems`                  | `ToolbarItemConfig<RightToolbarItemId>[]`   | Right section items (onClick, etc. from parent).                                                                                                                                             |
+| `templateButton`              | `TemplateButtonConfig \| null`              | Optional "+ Template (count)" pill; data from parent.                                                                                                                                        |
+| `leftCustomRender`            | `ReactNode`                                 | Custom left content (overrides `leftItems`).                                                                                                                                                 |
+| `rightCustomRender`           | `ReactNode`                                 | Custom right content (overrides `rightItems` and `micSendButton`).                                                                                                                           |
+| `micSendButton`               | `MicSendButtonConfig \| null`               | Rightmost button (Stop/Send/Mic); all data and handlers from parent.                                                                                                                         |
+| `projectSettingsModalOpen`    | `boolean`                                   | When true, the project settings modal (from `projectSettingsModalRender`) is shown. Set by parent when projectSettings is clicked.                                                           |
+| `onProjectSettingsModalClose` | `() => void`                                | Called when the project settings modal should close (overlay/close button).                                                                                                                  |
+| `projectSettingsModalRender`  | `(props: { onClose }) => ReactNode \| null` | Renders the project settings modal content (e.g. Configuration / Other Settings / Secret). Parent passes config and onChange so values update via parent (same pattern as ModelConfigPanel). |
+| `children`                    | `ReactNode`                                 | Optional middle content when not using `inputConfig`.                                                                                                                                        |
+| `onContainerClick`            | `(e) => void`                               | Called when the container is clicked (e.g. to focus input).                                                                                                                                  |
+
+## Theme and class overrides
+
+Default styles use gluestack-ui tokens (`$primary500`, `$background100`, `$outline200`, etc.) so the toolbar works in both **light and dark** themes. Buttons and the template pill use borders and backgrounds that stay visible in either mode.
+
+To override from outside, pass **`classNames`**:
+
+```ts
+interface InputToolBarClassNames {
+    container?: string; // root section
+    leftGroup?: string; // left section wrapper
+    templatePill?: string; // "+ Template (N)" button
+    templatePillSelected?: string; // selected/suggested pill
+    leftButtonActive?: string; // left mode button – active
+    leftButtonInactive?: string; // left mode button – inactive
+    rightButton?: string; // right toolbar button – default
+    rightButtonActive?: string; // right toolbar button – active
+    rightButtonDisabled?: string; // right toolbar button – disabled
+    micSendButton?: string; // primary mic/send button
+}
+```
+
+## Types
+
+### ToolbarItemConfig
+
+```ts
+interface ToolbarItemConfig<TId> {
+    id: TId;
+    label: string;
+    icon?: ReactNode;
+    enabled?: boolean; // default true; when false, the item is not rendered and takes no space
+    disabled?: boolean;
+    loading?: boolean;
+    active?: boolean; // dark/primary style when true
+    onClick?: () => void;
+    customButton?: ReactNode; // use instead of icon when provided
+}
+```
+
+### LeftToolbarItemId
+
+`'search' | 'zap' | 'lightbulb' | 'template'`
+
+### RightToolbarItemId
+
+`'projectSettings' | 'tag' | 'chip' | 'camera' | 'image' | 'attach' | 'mic'`
+
+- **projectSettings** – Project settings (gear icon). **Disabled by default.** Enable with `getDefaultRightItems({ projectSettings: { enabled: true, onClick: () => setProjectSettingsModalOpen(true) } })`.
+- **tag** – Enhance prompt with AI
+- **chip** – Configure chat model
+- **camera** – Capture image / screenshot
+- **image** – Insert image / picture
+- **attach** – Attach file (paperclip)
+- **mic** – Mic (or replaced by micSendButton)
+
+### InputConfig (React Native)
+
+```ts
+interface InputConfig {
+    value: string;
+    onChange: (e: NativeSyntheticEvent<TextInputChangeEventData>) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    onKeyDown?: (e: any) => void;
+    onPaste?: (e: any) => void;
+    id?: string;
+    name?: string;
+    inputRef?: React.RefObject<any>;
+}
+```
+
+> **Note:** Unlike the web version, `onChange` receives a React Native event. Use `e.nativeEvent.text` to get the value.
+
+### MicSendButtonConfig
+
+```ts
+interface MicSendButtonConfig {
+    hasContent: boolean;
+    onSend: () => void;
+    onMic: () => void;
+    disabled?: boolean;
+    isLoading?: boolean; // when true, show Stop icon and call onStop
+    onStop?: () => void;
+}
+```
+
+### Template visibility (build mode)
+
+The template button should only be visible when the user is in **build mode** (lightbulb/workflow). The parent controls this by passing `templateButton` only when `activeMode === 'workflow'`:
+
+```tsx
+templateButton={
+    activeMode === 'workflow'
+        ? { label: '+ Template', count: templates.length, onClick: openTemplateModal }
+        : null
+}
+```
+
+### TemplateButtonConfig
+
+```ts
+interface TemplateButtonConfig {
+    label: string; // e.g. "+ Template" when no selection
+    count?: number; // e.g. (1)
+    selectedLabel?: string | null; // when set, show selected template pill (name + remove + change)
+    onClick?: () => void; // open modal; also "change" when selected
+    onClearTemplate?: () => void; // when selected, called on remove (X)
+    disabled?: boolean;
+}
+```
+
+### Template selection modal
+
+When you pass **`templateModalConfig`**, InputToolBar renders a built-in modal with search, category filters, and a grid of template items. Each item needs: `id`, `label`, optional `description`, optional `category` (`TemplateModalItem`). Pass **`templateModalRender`** to use your own custom modal UI.
+
+## Helpers
+
+- **`getDefaultLeftItems(overrides?)`** – Returns default left items (search, zap, lightbulb). Override per id: `label`, `enabled`, `active`, `onClick`, `icon`, `customButton`.
+- **`getDefaultRightItems(overrides?)`** – Returns default right items (tag, chip, camera, image, attach, mic). Override per id (e.g. `image: { enabled: false }` or `image: { onClick: handleInsertImage }`).
+
+When using `micSendButton`, the parent typically omits `mic` from `rightItems` (e.g. `mic: { enabled: false }` in overrides) so the mic/send button is the rightmost action.
+
+## Examples
+
+### Basic usage with input
+
+```tsx
+import { InputToolBar, getDefaultLeftItems, getDefaultRightItems } from '@admin-layout/gluestack-ui-mobile';
+
+const [value, setValue] = useState('');
+const textareaRef = useRef<any>(null);
+
+const leftItems = getDefaultLeftItems({
+    search: { active: activeMode === 'chat', onClick: () => setMode('chat') },
+    zap: { active: activeMode === 'deep-search', onClick: () => setMode('deep-search') },
+    lightbulb: { active: activeMode === 'workflow', onClick: () => setMode('workflow') },
+});
+
+const rightItems = getDefaultRightItems({
+    tag: { enabled: false },
+    chip: { enabled: false },
+    camera: { onClick: handleCaptureImage },
+    attach: { onClick: handleAttachFile },
+});
+
+<InputToolBar
+    inputConfig={{
+        value,
+        onChange: (e) => setValue(e.nativeEvent.text),
+        placeholder: 'Ask anything...',
+        disabled: isLoading,
+        inputRef: textareaRef,
+    }}
+    topContent={<>… panels / banners …</>}
+    leftItems={leftItems}
+    rightItems={rightItems}
+    templateButton={{
+        label: '+ Template',
+        count: templates.length,
+        onClick: openTemplateModal,
+    }}
+    micSendButton={{
+        hasContent: value.trim().length > 0,
+        onSend: handleSend,
+        onMic: handleMic,
+        disabled,
+        isLoading,
+        onStop,
+    }}
+    onContainerClick={() => textareaRef.current?.focus()}
+/>;
+```
+
+### Custom left/right content
+
+```tsx
+<InputToolBar leftCustomRender={<YourLeftButtons />} rightCustomRender={<YourRightButtons />}>
+    <TextInput placeholder="Message" />
+</InputToolBar>
+```
+
+## Mic / Send behavior
+
+When `micSendButton` is provided:
+
+- **Empty input** (`hasContent === false`): rightmost button shows the **Mic** icon and calls `onMic` on click.
+- **Input has text** (`hasContent === true`): rightmost button shows the **Send** (arrow) icon and calls `onSend` on click.
+
+The button uses the primary style in both states. Any item with `id === 'mic'` in `rightItems` is not rendered when `micSendButton` is set.
+
+## Platform notes
+
+- Built with **@gluestack-ui/themed** (Box, HStack, VStack, Text, Pressable, etc.)
+- Uses **React Native** TextInput, Modal, ScrollView, Pressable
+- Icons from **@expo/vector-icons** (Ionicons)
+- Supports **NativeWind** for Tailwind styling where needed (e.g. `className` on RN Text)

package/src/components/InputToolBar/defaults.ts

@@ -0,0 +1,72 @@
+import type { LeftToolbarItemId, RightToolbarItemId, ToolbarItemConfig } from './types';
+
+const DEFAULT_LEFT_IDS: LeftToolbarItemId[] = ['search', 'zap', 'lightbulb'];
+const DEFAULT_RIGHT_IDS: RightToolbarItemId[] = ['projectSettings', 'tag', 'chip', 'camera', 'image', 'attach', 'mic'];
+
+const DEFAULT_LEFT_LABELS: Record<LeftToolbarItemId, string> = {
+    search: 'Chat mode',
+    zap: 'Deep Search',
+    lightbulb: 'Build mode',
+    template: 'Template',
+};
+
+const DEFAULT_RIGHT_LABELS: Record<RightToolbarItemId, string> = {
+    projectSettings: 'Project settings',
+    tag: 'Enhance your prompt with AI',
+    chip: 'Configure chat model',
+    camera: 'Capture image',
+    image: 'Insert image',
+    attach: 'Attach file',
+    mic: 'Mic / Send',
+};
+
+export type LeftItemOverrides = Partial<
+    Record<LeftToolbarItemId, Partial<Omit<ToolbarItemConfig<LeftToolbarItemId>, 'id'>>>
+>;
+export type RightItemOverrides = Partial<
+    Record<RightToolbarItemId, Partial<Omit<ToolbarItemConfig<RightToolbarItemId>, 'id'>>>
+>;
+
+/**
+ * Build default left toolbar items (search, zap, lightbulb). Omit or set enabled: false to hide.
+ * Override label, enabled, active, onClick, icon, customButton per id.
+ */
+export function getDefaultLeftItems(overrides?: LeftItemOverrides): ToolbarItemConfig<LeftToolbarItemId>[] {
+    return DEFAULT_LEFT_IDS.map((id) => {
+        const o = overrides?.[id];
+        return {
+            id,
+            label: o?.label ?? DEFAULT_LEFT_LABELS[id],
+            enabled: o?.enabled ?? true,
+            disabled: o?.disabled,
+            loading: o?.loading,
+            active: o?.active,
+            onClick: o?.onClick,
+            icon: o?.icon,
+            customButton: o?.customButton,
+        };
+    });
+}
+
+/**
+ * Build default right toolbar items (projectSettings, tag, chip, camera, image, attach, mic).
+ * projectSettings is disabled by default; pass projectSettings: { enabled: true, onClick } to show.
+ * Override label, enabled, disabled, loading, active, onClick, icon, customButton per id.
+ */
+export function getDefaultRightItems(overrides?: RightItemOverrides): ToolbarItemConfig<RightToolbarItemId>[] {
+    return DEFAULT_RIGHT_IDS.map((id) => {
+        const o = overrides?.[id];
+        const defaultEnabled = id === 'projectSettings' ? false : true;
+        return {
+            id,
+            label: o?.label ?? DEFAULT_RIGHT_LABELS[id],
+            enabled: o?.enabled ?? defaultEnabled,
+            disabled: o?.disabled,
+            loading: o?.loading,
+            active: o?.active,
+            onClick: o?.onClick,
+            icon: o?.icon,
+            customButton: o?.customButton,
+        };
+    });
+}

package/src/components/InputToolBar/index.ts

@@ -0,0 +1,18 @@
+export { InputToolBar } from './InputToolBar';
+export { getDefaultLeftItems, getDefaultRightItems } from './defaults';
+export type {
+    InputConfig,
+    InputToolBarClassNames,
+    InputToolBarProps,
+    LeftToolbarItemId,
+    MicSendButtonConfig,
+    ProjectSettingsModalRender,
+    ProjectSettingsModalRenderProps,
+    RightToolbarItemId,
+    TemplateButtonConfig,
+    TemplateModalConfig,
+    TemplateModalItem,
+    TemplateModalRender,
+    ToolbarItemConfig,
+} from './types';
+export type { LeftItemOverrides, RightItemOverrides } from './defaults';

package/src/components/InputToolBar/types.ts

@@ -0,0 +1,166 @@
+import type { ReactNode } from 'react';
+import type { NativeSyntheticEvent, TextInputChangeEventData } from 'react-native';
+
+/** Data-only config for built-in textarea. When provided, InputToolBar renders the textarea with default styling. */
+export interface InputConfig {
+    value: string;
+    onChange: (e: NativeSyntheticEvent<TextInputChangeEventData>) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    onKeyDown?: (e: any) => void;
+    onPaste?: (e: any) => void;
+    id?: string;
+    name?: string;
+    /** Optional ref for the textarea (e.g. for focus / height adjustment) */
+    inputRef?: React.RefObject<any>;
+}
+
+/** Predefined toolbar action ids for left section (mode toggles, template) */
+export type LeftToolbarItemId = 'search' | 'zap' | 'lightbulb' | 'template';
+
+/** Predefined toolbar action ids for right section. projectSettings = first item, disabled by default; enable via overrides. tag = enhance prompt, chip = configure model; both support enabled/disable and custom label, icon, onClick for app-specific use. */
+export type RightToolbarItemId = 'projectSettings' | 'tag' | 'chip' | 'camera' | 'image' | 'attach' | 'mic';
+
+/** Single toolbar button/item configuration */
+export interface ToolbarItemConfig<TId extends string = string> {
+    /** Unique id for the item (used for enable/disable and callbacks) */
+    id: TId;
+    /** Icon (React node) or custom content for the button */
+    icon?: ReactNode;
+    /** Accessible label / title (e.g. "Enhance your prompt with AI" when enabled, "Type something to enhance" when disabled) */
+    label: string;
+    /** Whether the item is enabled (default true). When false, item is hidden. */
+    enabled?: boolean;
+    /** When true, button is visible but disabled (greyed out, not clickable). Use for e.g. "enhance" when input is empty. */
+    disabled?: boolean;
+    /** When true, show loading spinner and treat as disabled. Use for e.g. "enhance" while request is in flight. */
+    loading?: boolean;
+    /** Whether the item is in active/selected state (e.g. primary color + hover style for right items) */
+    active?: boolean;
+    /** Click handler */
+    onClick?: () => void;
+    /** Optional custom button element; when set, icon/label are ignored and this is rendered */
+    customButton?: ReactNode;
+}
+
+/** When provided, the rightmost button shows Stop when loading, Send when hasContent, else Mic. Replaces any "mic" item in rightItems. */
+export interface MicSendButtonConfig {
+    /** True when input has content – show send icon; otherwise show mic icon (unless loading). */
+    hasContent: boolean;
+    onSend: () => void;
+    onMic: () => void;
+    disabled?: boolean;
+    /** When true, show stop icon and call onStop on click. */
+    isLoading?: boolean;
+    onStop?: () => void;
+}
+
+/** Configuration for the optional template pill: either "+ Template (N)" or selected template name with remove/change */
+export interface TemplateButtonConfig {
+    /** Button label prefix when no selection, e.g. "+ Template" */
+    label: string;
+    /** Count to show in parentheses when no selection, e.g. (1) */
+    count?: number;
+    /** When set, show selected template pill (name + remove + change) instead of "+ Template (N)" */
+    selectedLabel?: string | null;
+    /** Open template modal / change template (used for main pill click and for "change" when selected) */
+    onClick?: () => void;
+    /** When template is selected, called when user clicks remove (X) */
+    onClearTemplate?: () => void;
+    /** Disabled state */
+    disabled?: boolean;
+}
+
+/** Minimal template item for the default template selection modal. Map your app's template type to this shape. */
+export interface TemplateModalItem {
+    id: string;
+    label: string;
+    description?: string;
+    category?: string;
+}
+
+/** Config for the template selection modal. Pass data from props; InputToolBar renders default modal or custom via templateModalRender. */
+export interface TemplateModalConfig {
+    isOpen: boolean;
+    onClose: () => void;
+    templates: TemplateModalItem[];
+    selectedId: string | null;
+    onSelect: (id: string) => void;
+    suggestedId?: string | null;
+    title?: string;
+    /** Optional class for the modal content box (inner container). Use to standardize width/size, e.g. `max-w-md` or `max-w-xl`. */
+    modalClassName?: string;
+}
+
+/** Render prop for custom template modal. When provided, used instead of the default modal UI. */
+export type TemplateModalRender = (config: TemplateModalConfig) => ReactNode;
+
+/** Props passed to the project settings modal render function. Values are updated via the parent's callback (e.g. onModelConfigChange). */
+export interface ProjectSettingsModalRenderProps {
+    onClose: () => void;
+}
+
+/** Render prop for project settings modal content. When projectSettings is clicked, parent opens modal (sets projectSettingsModalOpen). Modal content receives onClose; parent passes config and onChange from props so values update via parent. */
+export type ProjectSettingsModalRender = (props: ProjectSettingsModalRenderProps) => ReactNode;
+
+/** Optional class overrides for InputToolBar sections. Use to adapt to light/dark theme or custom styling. */
+export interface InputToolBarClassNames {
+    /** Root section (default: rounded border bg-card shadow) */
+    container?: string;
+    /** Left toolbar group wrapper */
+    leftGroup?: string;
+    /** Template pill when no selection (e.g. "+ Template (N)") */
+    templatePill?: string;
+    /** Template pill when selected/suggested (name + remove + change) */
+    templatePillSelected?: string;
+    /** Left mode buttons – active state (filled) */
+    leftButtonActive?: string;
+    /** Left mode buttons – inactive state (outline) */
+    leftButtonInactive?: string;
+    /** Right toolbar buttons – default state */
+    rightButton?: string;
+    /** Right toolbar buttons – active state */
+    rightButtonActive?: string;
+    /** Right toolbar buttons – disabled state */
+    rightButtonDisabled?: string;
+    /** Mic/Send button (primary action) */
+    micSendButton?: string;
+}
+
+/** Props for the InputToolBar container. UI only: all data and behavior come from props. */
+export interface InputToolBarProps {
+    /** Optional class name for the toolbar container (merged with container in classNames) */
+    className?: string;
+    /** Optional class overrides for toolbar sections (works in both light and dark theme) */
+    classNames?: InputToolBarClassNames;
+    /** When provided, InputToolBar renders a built-in textarea; pass only data (value, onChange, etc.). */
+    inputConfig?: InputConfig | null;
+    /** Optional content above the input when inputConfig is set (e.g. panels, banners). */
+    topContent?: ReactNode;
+    /** Left section: items and template pill. All data (active, onClick, etc.) from parent. */
+    leftItems?: Array<ToolbarItemConfig<LeftToolbarItemId>>;
+    /** Right section: items. All data (onClick, etc.) from parent. */
+    rightItems?: Array<ToolbarItemConfig<RightToolbarItemId>>;
+    /** Optional template pill (e.g. "+ Template (1)"). Data from parent. */
+    templateButton?: TemplateButtonConfig | null;
+    /** Template selection modal: pass data from props. When set, InputToolBar renders the modal (default UI or custom). */
+    templateModalConfig?: TemplateModalConfig | null;
+    /** When provided, used instead of the default template modal UI. Receives templateModalConfig. */
+    templateModalRender?: TemplateModalRender | null;
+    /** Custom content for the left section (overrides leftItems) */
+    leftCustomRender?: ReactNode;
+    /** Custom content for the right section (overrides rightItems and micSendButton) */
+    rightCustomRender?: ReactNode;
+    /** When set, rightmost button: Stop/Send/Mic; all data and handlers from parent. */
+    micSendButton?: MicSendButtonConfig | null;
+    /** When true, the project settings modal (from projectSettingsModalRender) is shown. Set by parent when projectSettings is clicked. */
+    projectSettingsModalOpen?: boolean;
+    /** Called when the project settings modal should close (e.g. overlay click or close button). */
+    onProjectSettingsModalClose?: () => void;
+    /** Renders the project settings modal content (e.g. Configuration / Other Settings / Secret tabs). Parent passes config and onChange so values update via parent (same pattern as ModelConfigPanel). */
+    projectSettingsModalRender?: ProjectSettingsModalRender | null;
+    /** Optional content in the middle when not using inputConfig */
+    children?: ReactNode;
+    /** Click on container (e.g. to focus input) */
+    onContainerClick?: (e: any) => void;
+}

package/src/components/index.ts

@@ -1,3 +1,4 @@
+export * from './InputToolBar';
 export * from './Layout';
 export * from './PluginArea';
 export * from './ApplicationErrorHandler';

package/src/components/usePermissionAutoFetch.tsx

@@ -2,21 +2,21 @@ import { ResourceAuthority, ConfigFragmentName, IContext } from 'common';
 import { generateUserUri } from '@adminide-stack/core';
 import { useGetContextDataQuery } from 'common/lib/generated/generated.js';
 import { useSetting } from './useSetting';
+import type { URI } from '@vscode-alt/monaco-editor/esm/vs/base/common/uri.js';
 
 interface userPermissionAutoFetchProps {
     configKey?: string;
 }
 export const usePermissionAutoFetch = (options?: userPermissionAutoFetchProps) => {
     const { data, loading } = useGetContextDataQuery();
-    const { orgUri, userId } = (data?.getContextData as IContext) || {};
+    const { orgResource, userId } = (data?.getContextData as IContext) || {};
 
-    // Determine resource based on teamUri, orgUri, or fallback to userId
-    let resource = orgUri || (userId ? generateUserUri({ _id: userId }) : generateUserUri({ _id: 'guest' }));
+    let resource = orgResource || (userId ? generateUserUri({ _id: userId }) : generateUserUri({ _id: 'guest' }));
 
     const { loading: settingLoading, ...remaining } = useSetting({
         configKey: options?.configKey || '',
         overrides: {
-            resource: resource,
+            resource: resource as unknown as URI,
         },
         options: {
             forceExist: false,