@app-studio/components 0.10.18 → 0.10.20

package/dist/native/components/Chart/Chart/PieChart.native.js

@@ -0,0 +1,231 @@
+import React, { useCallback, useMemo } from 'react';
+import { View, Vertical, Horizontal, Text, useTheme } from 'app-studio';
+import { DEFAULT_COLORS } from './Chart.style';
+let Svg = null;
+let Path = null;
+let Circle = null;
+let SvgText = null;
+try {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    const RNSvg = require('react-native-svg');
+    Svg = RNSvg.Svg ?? RNSvg.default;
+    Path = RNSvg.Path;
+    Circle = RNSvg.Circle;
+    SvgText = RNSvg.Text;
+}
+catch {
+    /* optional peer absent */
+}
+const FULL_CIRCLE = Math.PI * 2;
+const FULL_CIRCLE_EPSILON = 0.0001;
+const FALLBACK_COLORS = [
+    '#3b82f6',
+    '#22c55e',
+    '#a855f7',
+    '#f97316',
+    '#ef4444',
+    '#14b8a6',
+    '#ec4899',
+    '#6366f1',
+    '#eab308',
+    '#06b6d4',
+];
+const getNumericSize = (value, fallback) => typeof value === 'number' && Number.isFinite(value) && value > 0
+    ? value
+    : fallback;
+const isColorToken = (value) => typeof value === 'string' &&
+    (value.startsWith('color-') || value.startsWith('theme-'));
+const isRawColor = (value) => typeof value === 'string' &&
+    (/^(#|rgb\(|rgba\(|hsl\(|hsla\()/.test(value) ||
+        ['black', 'transparent', 'white'].includes(value));
+const resolveSvgColor = (value, fallback, getColor) => {
+    if (isRawColor(value))
+        return value;
+    const resolved = getColor(value);
+    return resolved && !isColorToken(resolved) ? resolved : fallback;
+};
+const createCirclePath = (centerX, centerY, radius) => [
+    `M ${centerX} ${centerY - radius}`,
+    `A ${radius} ${radius} 0 1 1 ${centerX} ${centerY + radius}`,
+    `A ${radius} ${radius} 0 1 1 ${centerX} ${centerY - radius}`,
+    'Z',
+].join(' ');
+export const PieChart = ({ dataPoints, width, height, animationProgress, isDonut = false, onSliceClick, showTooltip, hideTooltip, views, }) => {
+    const { getColor } = useTheme();
+    const chartWidth = getNumericSize(width, 200);
+    const chartHeight = getNumericSize(height, 200);
+    const size = Math.min(chartWidth, chartHeight);
+    const radius = (size / 2) * 0.8;
+    const centerX = chartWidth / 2;
+    const centerY = chartHeight / 2;
+    const donutRadius = isDonut ? radius * 0.6 : 0;
+    const visibleDataPoints = useMemo(() => dataPoints
+        .map((point, index) => ({ point, originalIndex: index }))
+        .filter(({ point }) => !point.hidden), [dataPoints]);
+    const total = useMemo(() => visibleDataPoints.reduce((sum, { point }) => sum + point.value, 0), [visibleDataPoints]);
+    const resolveColor = useCallback((color, index = 0) => {
+        const fallback = FALLBACK_COLORS[index % FALLBACK_COLORS.length];
+        return resolveSvgColor(color || DEFAULT_COLORS[index % DEFAULT_COLORS.length], fallback, getColor);
+    }, [getColor]);
+    const slices = useMemo(() => {
+        if (total === 0) {
+            return [
+                {
+                    path: createCirclePath(centerX, centerY, radius),
+                    color: resolveSvgColor('color-gray-200', '#e4e4e7', getColor),
+                    label: 'Total',
+                    value: 0,
+                    percentage: '0.0%',
+                    labelX: centerX,
+                    labelY: centerY,
+                    startAngle: 0,
+                    endAngle: FULL_CIRCLE,
+                    originalIndex: -1,
+                },
+            ];
+        }
+        const result = [];
+        let startAngle = -Math.PI / 2;
+        visibleDataPoints.forEach(({ point, originalIndex }, visibleIndex) => {
+            const percentage = point.value / total;
+            const angle = percentage * 2 * Math.PI * animationProgress;
+            const gapAngle = visibleDataPoints.length > 1 ? 0.02 : 0;
+            const effectiveAngle = Math.max(0, angle - gapAngle);
+            const currentEndAngle = startAngle + effectiveAngle;
+            const isFullCircle = effectiveAngle >= FULL_CIRCLE - FULL_CIRCLE_EPSILON;
+            const startX = centerX + Math.cos(startAngle) * radius;
+            const startY = centerY + Math.sin(startAngle) * radius;
+            const endX = centerX + Math.cos(currentEndAngle) * radius;
+            const endY = centerY + Math.sin(currentEndAngle) * radius;
+            const largeArcFlag = effectiveAngle > Math.PI ? 1 : 0;
+            let path;
+            if (isFullCircle) {
+                path = createCirclePath(centerX, centerY, radius);
+            }
+            else if (isDonut) {
+                const innerStartX = centerX + Math.cos(startAngle) * donutRadius;
+                const innerStartY = centerY + Math.sin(startAngle) * donutRadius;
+                const innerEndX = centerX + Math.cos(currentEndAngle) * donutRadius;
+                const innerEndY = centerY + Math.sin(currentEndAngle) * donutRadius;
+                path = [
+                    `M ${startX} ${startY}`,
+                    `A ${radius} ${radius} 0 ${largeArcFlag} 1 ${endX} ${endY}`,
+                    `L ${innerEndX} ${innerEndY}`,
+                    `A ${donutRadius} ${donutRadius} 0 ${largeArcFlag} 0 ${innerStartX} ${innerStartY}`,
+                    'Z',
+                ].join(' ');
+            }
+            else {
+                path = [
+                    `M ${centerX} ${centerY}`,
+                    `L ${startX} ${startY}`,
+                    `A ${radius} ${radius} 0 ${largeArcFlag} 1 ${endX} ${endY}`,
+                    'Z',
+                ].join(' ');
+            }
+            const labelAngle = startAngle + effectiveAngle / 2;
+            const labelRadius = isDonut ? (radius + donutRadius) / 2 : radius * 0.7;
+            const labelX = centerX + Math.cos(labelAngle) * labelRadius;
+            const labelY = centerY + Math.sin(labelAngle) * labelRadius;
+            result.push({
+                path,
+                color: resolveColor(point.color, visibleIndex),
+                label: point.label,
+                value: point.value,
+                percentage: `${(percentage * 100).toFixed(1)}%`,
+                labelX,
+                labelY,
+                startAngle,
+                endAngle: currentEndAngle,
+                originalIndex,
+            });
+            startAngle = currentEndAngle;
+        });
+        return result;
+    }, [
+        visibleDataPoints,
+        total,
+        radius,
+        centerX,
+        centerY,
+        donutRadius,
+        animationProgress,
+        isDonut,
+        getColor,
+        resolveColor,
+    ]);
+    const renderFallback = () => (<Vertical width="100%" gap={10} padding={8}>
+      <Horizontal justifyContent="space-between" alignItems="center">
+        <Text fontWeight="600" color="color-gray-500" fontSize={13}>
+          {isDonut ? 'Total' : 'Distribution'}
+        </Text>
+        <Text fontWeight="800" color="color-gray-900" fontSize={16}>
+          {total.toLocaleString()}
+        </Text>
+      </Horizontal>
+      <Vertical gap={8}>
+        {visibleDataPoints.map(({ point, originalIndex }, index) => {
+            const percentage = total > 0 ? ((point.value / total) * 100).toFixed(1) : '0.0';
+            const color = resolveColor(point.color, index);
+            return (<Horizontal key={`slice-${originalIndex}`} alignItems="center" justifyContent="space-between" gap={8} onPress={onSliceClick
+                    ? () => onSliceClick(dataPoints[originalIndex], originalIndex)
+                    : undefined} {...views?.pie}>
+              <Horizontal alignItems="center" gap={8} flex={1}>
+                <View width={12} height={12} borderRadius={3} backgroundColor={color}/>
+                <Text fontSize={13} color="color-gray-700">
+                  {point.label}
+                </Text>
+              </Horizontal>
+              <Horizontal alignItems="center" gap={8}>
+                <Text fontSize={13} fontWeight="500" color="color-gray-900">
+                  {point.value.toLocaleString()}
+                </Text>
+                <Text fontSize={12} color="color-gray-500">
+                  {percentage}%
+                </Text>
+              </Horizontal>
+            </Horizontal>);
+        })}
+      </Vertical>
+    </Vertical>);
+    if (!Svg || !Path) {
+        return renderFallback();
+    }
+    return (<View width="100%" alignItems="center" justifyContent="center">
+      <Svg width={chartWidth} height={chartHeight} viewBox={`0 0 ${chartWidth} ${chartHeight}`}>
+        {slices.map((slice, index) => {
+            const isPlaceholder = slice.originalIndex === -1;
+            const handlePress = () => {
+                if (isPlaceholder)
+                    return;
+                const tooltipContent = (<Vertical minWidth={160} gap={4}>
+                <Text fontWeight="600">{slice.label}</Text>
+                <Text color="color-gray-500" fontSize={12}>
+                  {slice.value.toLocaleString()} ({slice.percentage})
+                </Text>
+              </Vertical>);
+                showTooltip(slice.labelX, slice.labelY, tooltipContent);
+                onSliceClick?.(dataPoints[slice.originalIndex], slice.originalIndex);
+            };
+            return (<React.Fragment key={`slice-${slice.originalIndex}-${index}`}>
+              <Path d={slice.path} fill={slice.color} stroke={resolveSvgColor('color-white', '#ffffff', getColor)} strokeWidth={2} onPress={!isPlaceholder ? handlePress : undefined} onPressOut={!isPlaceholder ? hideTooltip : undefined} {...views?.pie}/>
+              {!isPlaceholder &&
+                    SvgText &&
+                    slice.endAngle - slice.startAngle > 0.25 && (<SvgText x={slice.labelX} y={slice.labelY} fill="#ffffff" fontSize={11} fontWeight="800" textAnchor="middle" alignmentBaseline="middle" stroke="rgba(0,0,0,0.2)" strokeWidth={2}>
+                    {slice.percentage}
+                  </SvgText>)}
+            </React.Fragment>);
+        })}
+        {isDonut && Circle && (<Circle cx={centerX} cy={centerY} r={donutRadius} fill={resolveSvgColor('color-white', '#ffffff', getColor)}/>)}
+        {isDonut && SvgText && (<>
+            <SvgText x={centerX} y={centerY - 8} fill={resolveSvgColor('color-gray-500', '#71717a', getColor)} fontSize={14} fontWeight="500" textAnchor="middle" alignmentBaseline="middle">
+              Total
+            </SvgText>
+            <SvgText x={centerX} y={centerY + 12} fill={resolveSvgColor('color-gray-900', '#18181b', getColor)} fontSize={20} fontWeight="800" textAnchor="middle" alignmentBaseline="middle">
+              {total.toLocaleString()}
+            </SvgText>
+          </>)}
+      </Svg>
+    </View>);
+};
+//# sourceMappingURL=PieChart.native.js.map

package/dist/native/components/Chart/Chart/PieChart.native.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PieChart.native.js","sourceRoot":"","sources":["../../../../../src/components/Chart/Chart/PieChart.native.tsx"],"names":[],"mappings":"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"}

package/dist/native/components/ChatInput/EditableInput.native.d.ts

@@ -0,0 +1,48 @@
+import React from 'react';
+export interface Suggestion {
+    id: string;
+    text: string;
+    description?: string;
+}
+interface MentionData {
+    id: string;
+    name: string;
+    avatar?: string;
+    description?: string;
+}
+interface EditableInputProps {
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    autoFocus?: boolean;
+    suggestions?: Suggestion[];
+    onSuggestionSelect?: (suggestion: Suggestion) => void;
+    showSuggestions?: boolean;
+    mentionData?: MentionData[];
+    mentionTrigger?: string;
+    onMentionSelect?: (mention: MentionData) => void;
+    maxHeight?: string;
+    minHeight?: string;
+    views?: {
+        container?: any;
+        input?: any;
+        placeholder?: any;
+        suggestionsContainer?: any;
+        suggestionItem?: any;
+        mentionContainer?: any;
+        mentionItem?: any;
+    };
+}
+/**
+ * React Native variant of `EditableInput`.
+ *
+ * React Native has no DOM, so the web version's `contentEditable` div,
+ * `window.getSelection`, `document.createRange`, and `getBoundingClientRect`
+ * based positioning are not available. This variant uses app-studio's `Input`
+ * (a TextInput on native) with `multiline`, wired to the same `value`/`onChange`
+ * contract. Mentions and suggestions are rendered as a simple inline list of
+ * `View`/`Text` choices that invoke the same selection callbacks.
+ */
+export declare const EditableInput: React.ForwardRefExoticComponent<EditableInputProps & React.RefAttributes<any>>;
+export {};

package/dist/native/components/ChatInput/EditableInput.native.js

@@ -0,0 +1,122 @@
+import React, { forwardRef, useCallback, useState } from 'react';
+import { View, Text, Vertical, Input } from 'app-studio';
+/**
+ * React Native variant of `EditableInput`.
+ *
+ * React Native has no DOM, so the web version's `contentEditable` div,
+ * `window.getSelection`, `document.createRange`, and `getBoundingClientRect`
+ * based positioning are not available. This variant uses app-studio's `Input`
+ * (a TextInput on native) with `multiline`, wired to the same `value`/`onChange`
+ * contract. Mentions and suggestions are rendered as a simple inline list of
+ * `View`/`Text` choices that invoke the same selection callbacks.
+ */
+export const EditableInput = forwardRef(({ value, onChange, placeholder = 'Type your message...', disabled = false, autoFocus = true, suggestions = [], onSuggestionSelect, showSuggestions = false, mentionData = [], mentionTrigger = '@', onMentionSelect, maxHeight = '200px', minHeight = '40px', views = {}, }, ref) => {
+    // State variable to control the visibility of the mention dropdown list.
+    const [showMentions, setShowMentions] = useState(false);
+    // State variable holding the list of `MentionData` objects filtered by the current mention query.
+    const [filteredMentions, setFilteredMentions] = useState([]);
+    // State variable to store the starting character index of the mention trigger in the input text.
+    const [mentionStartPos, setMentionStartPos] = useState(-1);
+    // State variable to store the text being typed after the mention trigger (e.g., 'joh' in '@joh').
+    const [mentionQuery, setMentionQuery] = useState('');
+    // State variable to track whether the input field currently has focus (controls suggestion visibility).
+    const [isFocused, setIsFocused] = useState(false);
+    // Analyzes the typed text for an active mention trigger and filters `mentionData` accordingly.
+    const checkForMentions = useCallback((text) => {
+        // On native we don't have a caret position; use end of string as cursor.
+        const triggerIndex = text.lastIndexOf(mentionTrigger);
+        if (triggerIndex !== -1) {
+            const afterTrigger = text.substring(triggerIndex + 1);
+            const hasSpaceAfterTrigger = afterTrigger.includes(' ');
+            if (!hasSpaceAfterTrigger) {
+                const query = afterTrigger.toLowerCase();
+                const filtered = mentionData.filter((mention) => mention.name.toLowerCase().includes(query));
+                setMentionQuery(query);
+                setMentionStartPos(triggerIndex);
+                setFilteredMentions(filtered);
+                setShowMentions(filtered.length > 0);
+                return;
+            }
+        }
+        setShowMentions(false);
+        setMentionQuery('');
+        setMentionStartPos(-1);
+    }, [mentionData, mentionTrigger]);
+    // Handles text changes from the native `Input`, updating the value and checking for mentions.
+    const handleChangeText = useCallback((text) => {
+        onChange(text);
+        checkForMentions(text);
+    }, [onChange, checkForMentions]);
+    // Inserts a selected mention into the input text, replacing the active mention query.
+    const handleMentionSelect = useCallback((mention) => {
+        if (mentionStartPos !== -1) {
+            const beforeMention = value.substring(0, mentionStartPos);
+            const afterMention = value.substring(mentionStartPos + mentionTrigger.length + mentionQuery.length);
+            const newText = beforeMention + mentionTrigger + mention.name + ' ' + afterMention;
+            onChange(newText);
+        }
+        setShowMentions(false);
+        setMentionQuery('');
+        setMentionStartPos(-1);
+        if (onMentionSelect) {
+            onMentionSelect(mention);
+        }
+    }, [
+        value,
+        mentionStartPos,
+        mentionTrigger,
+        mentionQuery,
+        onChange,
+        onMentionSelect,
+    ]);
+    // Handles the selection of a suggestion, invoking the `onSuggestionSelect` prop if provided.
+    const handleSuggestionSelect = useCallback((suggestion) => {
+        if (onSuggestionSelect) {
+            onSuggestionSelect(suggestion);
+        }
+    }, [onSuggestionSelect]);
+    return (<View ref={ref} width="100%" position="relative" {...views?.container}>
+        <View width="100%" minHeight={minHeight} maxHeight={maxHeight} position="relative">
+          <Input multiline value={value} onChangeText={handleChangeText} onFocus={() => setIsFocused(true)} onBlur={() => setIsFocused(false)} placeholder={placeholder} editable={!disabled} autoFocus={autoFocus} width="100%" minHeight="24px" padding="8px" fontSize="14px" color="color-gray-900" backgroundColor="transparent" {...views?.input}/>
+        </View>
+
+        {/* Mentions list */}
+        {showMentions && filteredMentions.length > 0 && (<View width="100%" backgroundColor="color-white" border="2px solid" borderColor="color-blue-300" borderRadius="8px" maxHeight="200px" marginTop={4} {...views?.mentionContainer}>
+            <Vertical gap={0}>
+              {filteredMentions.map((mention) => (<View key={mention.id} width="100%" padding="12px 16px" backgroundColor="transparent" onPress={() => handleMentionSelect(mention)} {...views?.mentionItem}>
+                  <Vertical gap={4}>
+                    <Text fontSize="14px" color="color-gray-900" fontWeight="medium">
+                      {mentionTrigger}
+                      {mention.name}
+                    </Text>
+                    {mention.description && (<Text fontSize="12px" color="color-gray-600">
+                        {mention.description}
+                      </Text>)}
+                  </Vertical>
+                </View>))}
+            </Vertical>
+          </View>)}
+
+        {/* Suggestions list */}
+        {showSuggestions &&
+            suggestions.length > 0 &&
+            !showMentions &&
+            isFocused &&
+            !value && (<View width="100%" backgroundColor="color-white" border="2px solid" borderColor="color-green-300" borderRadius="8px" maxHeight="200px" marginTop={4} {...views?.suggestionsContainer}>
+              <Vertical gap={0}>
+                {suggestions.map((suggestion) => (<View key={suggestion.id} width="100%" padding="12px 16px" backgroundColor="transparent" onPress={() => handleSuggestionSelect(suggestion)} {...views?.suggestionItem}>
+                    <Vertical gap={4}>
+                      <Text fontSize="14px" color="color-gray-900" fontWeight="medium">
+                        {suggestion.text}
+                      </Text>
+                      {suggestion.description && (<Text fontSize="12px" color="color-gray-600">
+                          {suggestion.description}
+                        </Text>)}
+                    </Vertical>
+                  </View>))}
+              </Vertical>
+            </View>)}
+      </View>);
+});
+EditableInput.displayName = 'EditableInput';
+//# sourceMappingURL=EditableInput.native.js.map

package/dist/native/components/ChatInput/EditableInput.native.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditableInput.native.js","sourceRoot":"","sources":["../../../../src/components/ChatInput/EditableInput.native.tsx"],"names":[],"mappings":"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"}

package/dist/native/components/ChatInput/MessageInput.native.d.ts

@@ -0,0 +1,46 @@
+import React from 'react';
+import { ModelOption } from './ChatInput/ChatInput.type';
+interface MessageInputProps {
+    value: string;
+    onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    onSubmit: (e: React.FormEvent) => void;
+    placeholder?: string;
+    loading?: boolean;
+    disabled?: boolean;
+    isAgentRunning?: boolean;
+    onStopAgent?: () => void;
+    isDraggingOver?: boolean;
+    uploadedFiles: File[];
+    fileInputRef: React.RefObject<HTMLInputElement>;
+    isUploading: boolean;
+    sandboxId?: string;
+    setPendingFiles: React.Dispatch<React.SetStateAction<File[]>>;
+    setUploadedFiles: React.Dispatch<React.SetStateAction<File[]>>;
+    setIsUploading: React.Dispatch<React.SetStateAction<boolean>>;
+    hideAttachments?: boolean;
+    selectedModel: string;
+    onModelChange: (model: string) => void;
+    modelOptions: ModelOption[];
+    subscriptionStatus?: string;
+    canAccessModel: (model: string) => boolean;
+    views?: {
+        container?: any;
+        textarea?: any;
+        buttonGroup?: any;
+        submitButton?: any;
+        submitIcon?: any;
+        modelSelector?: any;
+    };
+}
+/**
+ * React Native variant of `MessageInput`.
+ *
+ * React Native has no DOM: the web version's `<textarea>`, `<select>`/`<option>`,
+ * and the file `<input>` (via `ChatUploader`) are all browser-only and would
+ * crash. This variant uses app-studio's `Input` (a TextInput on native) with
+ * `multiline`, replaces the model `<select>` with a row of `View`/`Text`
+ * choices, and omits the web-only file-attachment chrome. The same
+ * `value`/`onChange`/`onSubmit`/`onModelChange` callbacks are preserved.
+ */
+export declare const MessageInput: React.ForwardRefExoticComponent<MessageInputProps & React.RefAttributes<any>>;
+export {};

package/dist/native/components/ChatInput/MessageInput.native.js

@@ -0,0 +1,55 @@
+import React, { forwardRef } from 'react';
+import { Button, Horizontal, Vertical, View, Text, Input } from 'app-studio';
+/**
+ * React Native variant of `MessageInput`.
+ *
+ * React Native has no DOM: the web version's `<textarea>`, `<select>`/`<option>`,
+ * and the file `<input>` (via `ChatUploader`) are all browser-only and would
+ * crash. This variant uses app-studio's `Input` (a TextInput on native) with
+ * `multiline`, replaces the model `<select>` with a row of `View`/`Text`
+ * choices, and omits the web-only file-attachment chrome. The same
+ * `value`/`onChange`/`onSubmit`/`onModelChange` callbacks are preserved.
+ */
+export const MessageInput = forwardRef(({ value, onChange, onSubmit, placeholder = 'Describe what you need help with...', loading = false, disabled = false, isAgentRunning = false, uploadedFiles, selectedModel, onModelChange, modelOptions, canAccessModel, views = {}, }, ref) => {
+    // Bridges the native `onChangeText` (a raw string) to the web-style `onChange`
+    // signature by synthesizing a minimal change-event-like object.
+    const handleChangeText = (text) => {
+        onChange({
+            target: { value: text },
+            currentTarget: { value: text },
+        });
+    };
+    // Triggers submission while reusing the same `onSubmit` callback the web uses.
+    const handleSubmit = () => {
+        onSubmit({});
+    };
+    const submitDisabled = (!value.trim() && uploadedFiles.length === 0) ||
+        loading ||
+        (disabled && !isAgentRunning);
+    return (<View width="100%" position="relative" {...views?.container}>
+        <Input ref={ref} multiline value={value} onChangeText={handleChangeText} onSubmitEditing={handleSubmit} placeholder={placeholder} editable={!(disabled && !isAgentRunning)} width="100%" minHeight="40px" maxHeight="200px" padding="8px 12px" fontSize="14px" lineHeight="15px" color="color-gray-900" backgroundColor="transparent" {...views?.textarea}/>
+        <Horizontal justifyContent="space-between" alignItems="center" padding="4px 8px" {...views?.buttonGroup}>
+          {/* Model selection rendered as tappable choices (no DOM <select>). */}
+          <Horizontal gap={8} alignItems="center" flexWrap="wrap">
+            {modelOptions.map((model) => {
+            const accessible = canAccessModel(model.id);
+            const isSelected = model.id === selectedModel;
+            return (<View key={model.id} height="36px" padding="0 12px" borderRadius="8px" justifyContent="center" backgroundColor={isSelected ? 'color-blue-50' : 'transparent'} opacity={accessible ? 1 : 0.5} onPress={accessible ? () => onModelChange(model.id) : undefined} {...views?.modelSelector}>
+                  <Vertical justifyContent="center" height="100%">
+                    <Text fontSize="14px" color={isSelected ? 'color-blue-600' : 'color-gray-500'}>
+                      {model.name}
+                    </Text>
+                  </Vertical>
+                </View>);
+        })}
+          </Horizontal>
+          <Button onClick={handleSubmit} height="36px" minWidth="36px" padding="0 12px" borderRadius="8px" backgroundColor={isAgentRunning ? 'theme-error' : 'theme-primary'} color="color-white" disabled={submitDisabled} {...views?.submitButton}>
+            <Text color="color-white" fontSize="14px">
+              {isAgentRunning ? 'Stop' : loading ? '...' : 'Send'}
+            </Text>
+          </Button>
+        </Horizontal>
+      </View>);
+});
+MessageInput.displayName = 'MessageInput';
+//# sourceMappingURL=MessageInput.native.js.map

package/dist/native/components/ChatInput/MessageInput.native.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageInput.native.js","sourceRoot":"","sources":["../../../../src/components/ChatInput/MessageInput.native.tsx"],"names":[],"mappings":"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"}

package/dist/native/components/ChatWidget/ChatWidget/ChatWidget.view.native.d.ts

@@ -0,0 +1,14 @@
+/**
+ * ChatWidgetView (React Native)
+ *
+ * The web view's input is `<View as="textarea">` — on native `as` is ignored,
+ * so it renders a non-editable View and the chat isn't interactive. This native
+ * variant mirrors the same surface (messages list, context chips, attachment /
+ * context-picker / send buttons) but uses app-studio's `Input` (a real
+ * TextInput) wired to `internalInputValue` / `handleInputChange` /
+ * `handleSubmit`, so you can type and send on native.
+ */
+import React from 'react';
+import type { ChatWidgetViewProps } from './ChatWidget.props';
+declare const ChatWidgetView: React.FC<ChatWidgetViewProps>;
+export default ChatWidgetView;