@app-studio/components 0.10.17

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

@@ -0,0 +1,187 @@
+import React, { useMemo } from 'react';
+import { View, useTheme } from 'app-studio';
+import { Text } from 'app-studio';
+import { LineStyles, PointStyles, AxisStyles, AxisLabelStyles, GridStyles, } from './Chart.style';
+// Defines the main LineChart functional component, responsible for rendering line charts with customizable data, dimensions, animations, and interactivity.
+export const LineChart = ({ data, width, height, animationProgress, showGrid = true, onPointClick, showTooltip, hideTooltip, views, }) => {
+    // Retrieves the `getColor` utility function from the application's theme context for consistent color usage.
+    const { getColor } = useTheme();
+    // Defines the internal padding for the chart area, accounting for axes and labels.
+    const padding = { top: 20, right: 20, bottom: 40, left: 40 };
+    // Calculates the effective drawing width for the chart data, subtracting horizontal padding from the total width.
+    const chartWidth = width - padding.left - padding.right;
+    // Calculates the effective drawing height for the chart data, subtracting vertical padding from the total height.
+    const chartHeight = height - padding.top - padding.bottom;
+    // Memoized calculation to determine the maximum value across all data series. This value is crucial for correctly scaling the Y-axis.
+    const maxValue = useMemo(() => {
+        let max = 0;
+        data.series.forEach((series) => {
+            series.data.forEach((value) => {
+                max = Math.max(max, value);
+            });
+        });
+        return max;
+    }, [data]);
+    // Ensures `maxValue` is at least 10, preventing division by zero or overly compressed charts when data values are small or zero, improving visual clarity.
+    const effectiveMaxValue = maxValue || 10;
+    // Memoized calculation to generate an array of Y-axis tick values, evenly distributed based on the effective maximum value for appropriate axis labeling.
+    const yAxisTicks = useMemo(() => {
+        const tickCount = 5;
+        const ticks = [];
+        for (let i = 0; i <= tickCount; i++) {
+            const value = (effectiveMaxValue / tickCount) * i;
+            ticks.push(value);
+        }
+        return ticks;
+    }, [maxValue]);
+    // Generates a smooth cubic Bezier curve SVG path string for a given data series, incorporating animation progress for dynamic rendering.
+    //   - **Parameter**: `series` - An array of numerical data points for a single line.
+    const generatePath = (series) => {
+        if (series.length < 2)
+            return '';
+        const points = series.map((value, index) => ({
+            x: padding.left + (index / (data.labels.length - 1)) * chartWidth,
+            y: height -
+                padding.bottom -
+                (value / effectiveMaxValue) * chartHeight * animationProgress,
+        }));
+        let path = `M ${points[0].x},${points[0].y}`;
+        for (let i = 0; i < points.length - 1; i++) {
+            const p0 = points[i === 0 ? i : i - 1];
+            const p1 = points[i];
+            const p2 = points[i + 1];
+            const p3 = points[i + 2 === points.length ? i + 1 : i + 2];
+            const cp1x = p1.x + (p2.x - p0.x) / 6;
+            const cp1y = p1.y + (p2.y - p0.y) / 6;
+            const cp2x = p2.x - (p3.x - p1.x) / 6;
+            const cp2y = p2.y - (p3.y - p1.y) / 6;
+            path += ` C ${cp1x},${cp1y} ${cp2x},${cp2y} ${p2.x},${p2.y}`;
+        }
+        return path;
+    };
+    // Generates an SVG path string for the shaded area beneath a line, closing the path to the X-axis to create a filled region.
+    //   - **Parameter**: `series` - An array of numerical data points for which to create the area path.
+    const generateAreaPath = (series) => {
+        if (series.length < 2)
+            return '';
+        const linePath = generatePath(series);
+        const startX = padding.left;
+        const endX = padding.left + chartWidth;
+        const baseY = height - padding.bottom;
+        return `${linePath} L ${endX},${baseY} L ${startX},${baseY} Z`;
+    };
+    return (<svg width={width} height={height}>
+      <defs>
+        {data.series.map((series, index) => {
+            const color = series.color ? getColor(series.color) : 'black';
+            return (<linearGradient key={`gradient-${index}`} id={`gradient-${index}`} x1="0%" y1="0%" x2="0%" y2="100%">
+              <stop offset="0%" stopColor={color} stopOpacity={0.3}/>
+              <stop offset="100%" stopColor={color} stopOpacity={0}/>
+            </linearGradient>);
+        })}
+      </defs>
+      
+      <line x1={padding.left} y1={height - padding.bottom} x2={width - padding.right} y2={height - padding.bottom} {...AxisStyles} {...views?.axis}/>
+      
+      <line x1={padding.left} y1={padding.top} x2={padding.left} y2={height - padding.bottom} {...AxisStyles} {...views?.axis}/>
+      
+      {data.labels.map((label, index) => {
+            const x = padding.left + (index / (data.labels.length - 1)) * chartWidth;
+            const y = height - padding.bottom + 20;
+            return (<text key={`x-label-${index}`} x={x} y={y} textAnchor="middle" {...AxisLabelStyles} {...views?.axisLabel}>
+            {label}
+          </text>);
+        })}
+      
+      {yAxisTicks.map((tick, index) => {
+            const y = height - padding.bottom - (tick / effectiveMaxValue) * chartHeight;
+            return (<React.Fragment key={`y-tick-${index}`}>
+            <text x={padding.left - 10} y={y} textAnchor="end" dominantBaseline="middle" {...AxisLabelStyles} {...views?.axisLabel}>
+              {tick.toFixed(0)}
+            </text>
+            {showGrid && (<line x1={padding.left} y1={y} x2={width - padding.right} y2={y} {...GridStyles} {...views?.grid}/>)}
+          </React.Fragment>);
+        })}
+      
+      {data.series.map((series, seriesIndex) => {
+            if (series.hidden)
+                return null;
+            const lineColor = series.color ? getColor(series.color) : 'black';
+            return (<React.Fragment key={`series-${seriesIndex}`}>
+            
+            <path d={generateAreaPath(series.data)} fill={`url(#gradient-${seriesIndex})`} {...views?.area}/>
+            
+            <path d={generatePath(series.data)} stroke={lineColor} {...LineStyles} {...views?.line}/>
+            
+            {series.data.map((value, dataIndex) => {
+                    const x = padding.left +
+                        (dataIndex / (data.labels.length - 1)) * chartWidth;
+                    const y = height -
+                        padding.bottom -
+                        (value / effectiveMaxValue) * chartHeight * animationProgress;
+                    const categoryLabel = data.labels[dataIndex];
+                    const categoryTotal = data.series.reduce((sum, currentSeries) => {
+                        const seriesValue = currentSeries.data[dataIndex];
+                        return (sum + (typeof seriesValue === 'number' ? seriesValue : 0));
+                    }, 0);
+                    const sharePercentage = categoryTotal > 0
+                        ? ((value / categoryTotal) * 100).toFixed(1)
+                        : null;
+                    const previousValue = dataIndex > 0 && typeof series.data[dataIndex - 1] === 'number'
+                        ? series.data[dataIndex - 1]
+                        : null;
+                    const deltaValue = typeof previousValue === 'number'
+                        ? value - previousValue
+                        : null;
+                    const formattedDelta = typeof deltaValue === 'number'
+                        ? `${deltaValue >= 0 ? '+' : ''}${deltaValue.toLocaleString()}`
+                        : null;
+                    const handleMouseMove = (e) => {
+                        const tooltipContent = (<View display="flex" flexDirection="column" minWidth="200px">
+                    <View display="flex" justifyContent="space-between" alignItems="center">
+                      <Text fontWeight="semibold">{series.name}</Text>
+                      <View width="12px" height="12px" borderRadius="2px" backgroundColor={lineColor}/>
+                    </View>
+                    <Text marginTop="4px" color="color-gray-500" fontSize="12px">
+                      {categoryLabel}
+                    </Text>
+                    <View marginTop="8px" display="flex" flexDirection="column">
+                      <View display="flex" justifyContent="space-between">
+                        <Text color="color-gray-500">Value</Text>
+                        <Text fontWeight="medium">
+                          {value.toLocaleString()}
+                        </Text>
+                      </View>
+                      {formattedDelta !== null && (<View marginTop="4px" display="flex" justifyContent="space-between">
+                          <Text color="color-gray-500">Change</Text>
+                          <Text fontWeight="medium">{formattedDelta}</Text>
+                        </View>)}
+                      {sharePercentage !== null && (<View marginTop="4px" display="flex" justifyContent="space-between">
+                          <Text color="color-gray-500">Share</Text>
+                          <Text fontWeight="medium">{`${sharePercentage}%`}</Text>
+                        </View>)}
+                      <View marginTop="4px" display="flex" justifyContent="space-between">
+                        <Text color="color-gray-500">Category total</Text>
+                        <Text fontWeight="medium">
+                          {categoryTotal.toLocaleString()}
+                        </Text>
+                      </View>
+                    </View>
+                  </View>);
+                        const rect = e.currentTarget.getBoundingClientRect();
+                        const screenX = rect.left + rect.width / 2;
+                        const screenY = rect.top + rect.height / 2;
+                        showTooltip(screenX, screenY, tooltipContent);
+                    };
+                    const handleClick = () => {
+                        if (onPointClick) {
+                            onPointClick(series.name, dataIndex);
+                        }
+                    };
+                    return (<circle key={`point-${seriesIndex}-${dataIndex}`} cx={x} cy={y} fill={lineColor} onMouseEnter={handleMouseMove} onMouseMove={handleMouseMove} onMouseLeave={hideTooltip} onClick={handleClick} {...PointStyles} {...views?.point}/>);
+                })}
+          </React.Fragment>);
+        })}
+    </svg>);
+};
+//# sourceMappingURL=LineChart.js.map

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

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

package/dist/native/components/Chart/Chart/PieChart.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ChartDataPoint } from './Chart.type';
+interface PieChartProps {
+    dataPoints: ChartDataPoint[];
+    width: number;
+    height: number;
+    animationProgress: number;
+    isDonut?: boolean;
+    onSliceClick?: (dataPoint: ChartDataPoint, index: number) => void;
+    showTooltip: (x: number, y: number, content: React.ReactNode) => void;
+    hideTooltip: () => void;
+    views?: any;
+}
+export declare const PieChart: React.FC<PieChartProps>;
+export {};

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

@@ -0,0 +1,222 @@
+import React, { useMemo, useRef, useEffect } from 'react';
+import { useTheme, useElementPosition, View } from 'app-studio';
+import { Text } from 'app-studio';
+import { PieSliceStyles, DEFAULT_COLORS } from './Chart.style';
+// The main functional component for rendering a Pie Chart or Donut Chart, displaying data points as proportional slices. It handles rendering logic, interactivity, and animation.
+export const PieChart = ({ dataPoints, width, height, animationProgress, isDonut = false, onSliceClick, showTooltip, hideTooltip, views, }) => {
+    // Accesses the `getColor` utility from the `useTheme` hook to resolve colors based on the application's theme.
+    const { getColor } = useTheme();
+    // Utilizes the `useElementPosition` hook to track the position and dimensions of the chart's SVG element, which is crucial for accurate tooltip positioning.
+    const { ref: positionRef, relation } = useElementPosition({
+        trackChanges: true,
+        trackOnHover: true,
+        trackOnScroll: true,
+        trackOnResize: true,
+    });
+    // Creates a ref to directly access the SVG element of the chart for DOM manipulations, such as getting its bounding client rectangle.
+    const chartRef = useRef(null);
+    // An effect hook that assigns the `chartRef.current` (the SVG element) to the `positionRef.current` from `useElementPosition` once the component mounts or `chartRef`/`positionRef` change, linking the SVG to position tracking.
+    useEffect(() => {
+        if (chartRef.current && positionRef) {
+            positionRef.current = chartRef.current;
+        }
+    }, [chartRef, positionRef]);
+    // Calculates the effective size of the chart by taking the minimum of the provided width and height to ensure it fits within its container.
+    const size = Math.min(width, height);
+    // Determines the outer radius of the pie chart slices, scaled to 80% of the calculated effective size.
+    const radius = (size / 2) * 0.8;
+    // Calculates the x-coordinate of the center of the pie chart.
+    const centerX = width / 2;
+    // Calculates the y-coordinate of the center of the pie chart.
+    const centerY = height / 2;
+    // Calculates the inner radius for a donut chart; if `isDonut` is false, it defaults to 0, making it a standard pie chart.
+    const donutRadius = isDonut ? radius * 0.6 : 0;
+    // Memoizes the array of data points that are currently visible (not hidden), optimizing rendering by avoiding recalculations when unnecessary.
+    const visibleDataPoints = useMemo(() => {
+        return dataPoints.filter((p) => !p.hidden);
+    }, [dataPoints]);
+    // Memoizes the sum of all values from the `visibleDataPoints`, representing the total for the pie chart.
+    const total = useMemo(() => {
+        return visibleDataPoints.reduce((sum, point) => sum + point.value, 0);
+    }, [visibleDataPoints]);
+    // Memoizes the calculation of individual pie slices, including their SVG paths, colors, labels, and angles. It handles both standard pie and donut charts, including a placeholder slice if the total value is zero.
+    const slices = useMemo(() => {
+        if (total === 0) {
+            const path = isDonut
+                ? [
+                    `M ${centerX} ${centerY - radius}`,
+                    `A ${radius} ${radius} 0 1 1 ${centerX} ${centerY + radius}`,
+                    `A ${radius} ${radius} 0 1 1 ${centerX} ${centerY - radius}`,
+                    `M ${centerX} ${centerY - donutRadius}`,
+                    `A ${donutRadius} ${donutRadius} 0 1 0 ${centerX} ${centerY + donutRadius}`,
+                    `A ${donutRadius} ${donutRadius} 0 1 0 ${centerX} ${centerY - donutRadius}`,
+                    'Z',
+                ].join(' ')
+                : [
+                    `M ${centerX} ${centerY}`,
+                    `M ${centerX} ${centerY - radius}`,
+                    `A ${radius} ${radius} 0 1 1 ${centerX} ${centerY + radius}`,
+                    `A ${radius} ${radius} 0 1 1 ${centerX} ${centerY - radius}`,
+                    'Z',
+                ].join(' ');
+            return [
+                {
+                    path,
+                    color: '#E2E8F0',
+                    label: 'Total',
+                    value: 0,
+                    percentage: '0%',
+                    labelX: centerX,
+                    labelY: centerY,
+                    startAngle: 0,
+                    endAngle: Math.PI * 2,
+                    index: -1,
+                },
+            ];
+        }
+        const result = [];
+        let startAngle = -Math.PI / 2;
+        for (let i = 0; i < visibleDataPoints.length; i++) {
+            const value = visibleDataPoints[i].value;
+            const percentage = value / total;
+            const angle = percentage * 2 * Math.PI * animationProgress;
+            const gapAngle = 0.02;
+            const effectiveAngle = Math.max(0, angle - gapAngle);
+            const currentEndAngle = startAngle + effectiveAngle;
+            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 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;
+            const largeArcFlag = effectiveAngle > Math.PI ? 1 : 0;
+            let path;
+            if (isDonut) {
+                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;
+            const percentageText = `${(percentage * 100).toFixed(1)}%`;
+            const colorValue = visibleDataPoints[i].color || DEFAULT_COLORS[i % DEFAULT_COLORS.length];
+            const resolvedColor = getColor(colorValue);
+            result.push({
+                path,
+                color: resolvedColor,
+                label: visibleDataPoints[i].label,
+                value: visibleDataPoints[i].value,
+                percentage: percentageText,
+                labelX,
+                labelY,
+                startAngle,
+                endAngle: currentEndAngle,
+                index: i,
+                originalIndex: dataPoints.findIndex((p) => p.label === visibleDataPoints[i].label),
+            });
+            startAngle = currentEndAngle;
+        }
+        return result;
+    }, [
+        visibleDataPoints,
+        total,
+        radius,
+        centerX,
+        centerY,
+        donutRadius,
+        animationProgress,
+        isDonut,
+        dataPoints,
+    ]);
+    return (<svg ref={chartRef} width={width} height={height} style={{ overflow: 'visible' }}>
+      
+      {isDonut && (<g pointerEvents="none">
+          <circle cx={centerX} cy={centerY} r={donutRadius} fill="white"/>
+          <text x={centerX} y={centerY - 8} textAnchor="middle" dominantBaseline="middle" fontSize="14px" fontWeight="500" fill="color-gray-500">
+            Total
+          </text>
+          <text x={centerX} y={centerY + 12} textAnchor="middle" dominantBaseline="middle" fontSize="20px" fontWeight="800" fill="color-gray-900">
+            {total.toLocaleString()}
+          </text>
+        </g>)}
+      
+      {slices.map((slice, index) => {
+            const handleMouseMove = (e) => {
+                const numericShare = total > 0 ? (slice.value / total) * 100 : 0;
+                const remainingShare = total > 0 ? Math.max(0, 100 - numericShare) : null;
+                const tooltipContent = (<View display="flex" flexDirection="column" minWidth="200px">
+              <View display="flex" justifyContent="space-between" alignItems="center">
+                <Text fontWeight="semibold">{slice.label}</Text>
+                <View width="12px" height="12px" borderRadius="2px" backgroundColor={slice.color}/>
+              </View>
+              <Text marginTop="4px" color="color-gray-500" fontSize="12px">
+                Slice {slice.index + 1} of {visibleDataPoints.length}
+              </Text>
+              <View marginTop="8px" display="flex" flexDirection="column">
+                <View display="flex" justifyContent="space-between">
+                  <Text color="color-gray-500">Value</Text>
+                  <Text fontWeight="medium">
+                    {slice.value.toLocaleString()}
+                  </Text>
+                </View>
+                <View marginTop="4px" display="flex" justifyContent="space-between">
+                  <Text color="color-gray-500">Share</Text>
+                  <Text fontWeight="medium">{slice.percentage}</Text>
+                </View>
+                <View marginTop="4px" display="flex" justifyContent="space-between">
+                  <Text color="color-gray-500">Total</Text>
+                  <Text fontWeight="medium">{total.toLocaleString()}</Text>
+                </View>
+                {remainingShare !== null && (<View marginTop="4px" display="flex" justifyContent="space-between">
+                    <Text color="color-gray-500">Remaining</Text>
+                    <Text fontWeight="medium">
+                      {`${remainingShare.toFixed(1)}%`}
+                    </Text>
+                  </View>)}
+              </View>
+            </View>);
+                let screenX = e.clientX;
+                let screenY = e.clientY;
+                if (chartRef.current) {
+                    const svgRect = chartRef.current.getBoundingClientRect();
+                    screenX = svgRect.left + slice.labelX;
+                    screenY = svgRect.top + slice.labelY;
+                }
+                showTooltip(screenX, screenY, tooltipContent);
+            };
+            const handleClick = () => {
+                if (slice.index !== -1 && onSliceClick) {
+                    onSliceClick(dataPoints[slice.index], slice.index);
+                }
+            };
+            const isPlaceholder = slice.index === -1;
+            return (<g key={`slice-${index}`}>
+            <path d={slice.path} fill={slice.color} onMouseEnter={!isPlaceholder ? handleMouseMove : undefined} onMouseMove={!isPlaceholder ? handleMouseMove : undefined} onMouseLeave={!isPlaceholder ? hideTooltip : undefined} onClick={handleClick} {...PieSliceStyles} style={{
+                    ...PieSliceStyles?.style,
+                    cursor: isPlaceholder ? 'default' : 'pointer',
+                }} {...views?.pie}/>
+            
+            {!isPlaceholder && slice.endAngle - slice.startAngle > 0.25 && (<text x={slice.labelX} y={slice.labelY} textAnchor="middle" dominantBaseline="middle" fill="white" fontSize="11px" fontWeight="800" pointerEvents="none" paintOrder="stroke" stroke="rgba(0,0,0,0.2)" strokeWidth="2px">
+                {slice.percentage}
+              </text>)}
+          </g>);
+        })}
+    </svg>);
+};
+//# sourceMappingURL=PieChart.js.map

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

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

package/dist/native/components/Chart/Chart.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ChartProps } from './Chart/Chart.props';
+export declare const Chart: React.FC<ChartProps>;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ChartView } from './Chart/Chart.view';
+// This file defines the main Chart component, which serves as a simple wrapper that renders the ChartView component, passing all received props directly to it.
+const ChartComponent = (props) => {
+    return <ChartView {...props}/>;
+};
+export const Chart = ChartComponent;
+//# sourceMappingURL=Chart.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Chart.js","sourceRoot":"","sources":["../../../../src/components/Chart/Chart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,gKAAgK;AAChK,MAAM,cAAc,GAAyB,CAAC,KAAK,EAAE,EAAE;IACrD,OAAO,CAAC,SAAS,CAAC,IAAI,KAAK,CAAC,EAAG,CAAC;AAClC,CAAC,CAAC;AACF,MAAM,CAAC,MAAM,KAAK,GAAG,cAAc,CAAC"}

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

@@ -0,0 +1,18 @@
+import React from 'react';
+interface AttachmentGroupProps {
+    files: File[];
+    sandboxId?: string;
+    onRemove: (index: number) => void;
+    layout?: 'inline' | 'grid';
+    maxHeight?: string;
+    showPreviews?: boolean;
+    views?: {
+        container?: any;
+        item?: any;
+        name?: any;
+        size?: any;
+        removeButton?: any;
+    };
+}
+export declare const AttachmentGroup: React.FC<AttachmentGroupProps>;
+export {};

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

@@ -0,0 +1,93 @@
+import React, { useCallback } from 'react';
+import { Vertical, View, Image, Center, Button, Horizontal } from 'app-studio';
+import { FileIcon, AudioIcon } from '../Icon/Icon';
+import { HoverCard } from '../HoverCard/HoverCard';
+import { Text } from 'app-studio';
+import { DefaultAgentChatStyles } from './ChatInput/ChatInput.style';
+// The main AttachmentGroup functional component, responsible for displaying a list of file attachments.
+export const AttachmentGroup = ({ files, sandboxId, onRemove, layout = 'inline', maxHeight = '120px', showPreviews = false, views = {}, }) => {
+    // Checks if there are any files to display; if not, it renders nothing to avoid empty UI.
+    if (files.length === 0) {
+        return null;
+    }
+    // A memoized callback function that converts file sizes from bytes into a human-readable format (B, KB, MB).
+    const formatFileSize = useCallback((bytes) => {
+        if (bytes < 1024)
+            return `${bytes} B`;
+        if (bytes < 1024 * 1024)
+            return `${(bytes / 1024).toFixed(1)} KB`;
+        return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+    }, []);
+    // A memoized callback function that returns specific background and text colors based on the file's MIME type.
+    const getAttachmentAccent = useCallback((file) => {
+        if (file.type.startsWith('image/')) {
+            return { backgroundColor: '#DBEAFE', color: '#2563EB' };
+        }
+        if (file.type.startsWith('video/')) {
+            return { backgroundColor: '#EDE9FE', color: '#7C3AED' };
+        }
+        if (file.type.startsWith('audio/')) {
+            return { backgroundColor: '#DCFCE7', color: '#16A34A' };
+        }
+        return { backgroundColor: '#E2E8F0', color: '#475569' };
+    }, []);
+    return (<View display="flex" flexWrap="wrap" gap="8px" padding="8px 0" maxHeight={maxHeight} overflowY="auto" {...views?.container}>
+      {files.map((file, index) => {
+            const previewUrl = file?.path ||
+                file?.url ||
+                (showPreviews ? URL.createObjectURL(file) : '');
+            const isImage = file.type.startsWith('image/');
+            const isVideo = file.type.startsWith('video/');
+            const isAudio = file.type.startsWith('audio/');
+            const accent = getAttachmentAccent(file);
+            if (!showPreviews) {
+                return (<Horizontal key={index} alignItems="center" gap="8px" padding="6px 10px 6px 8px" borderRadius="9999px" border="1px solid #E2E8F0" backgroundColor="color-white" maxWidth="100%" animate={{
+                        from: { opacity: 0, scale: 0.96 },
+                        to: { opacity: 1, scale: 1 },
+                    }} animationDuration={0.2} {...views?.item}>
+              <Center width="22px" height="22px" minWidth="22px" borderRadius="9999px" backgroundColor={accent.backgroundColor} color={accent.color}>
+                {isAudio ? (<AudioIcon widthHeight={12} color="currentColor"/>) : (<FileIcon widthHeight={12} color="currentColor"/>)}
+              </Center>
+              <Text fontSize="12px" lineHeight="16px" color="color-gray-600" maxLines={1} maxWidth="220px" {...views?.name}>
+                {file.name} · {formatFileSize(file.size)}
+              </Text>
+              {onRemove && (<View as="button" type="button" onClick={() => onRemove(index)} aria-label={`Remove ${file.name}`} display="flex" alignItems="center" justifyContent="center" width="16px" height="16px" minWidth="16px" border="none" backgroundColor="transparent" color="color-gray-400" padding={0} cursor="pointer" transition="color 0.2s ease, opacity 0.2s ease" _hover={{ color: 'color-gray-600' }}>
+                  ×
+                </View>)}
+            </Horizontal>);
+            }
+            return (<Vertical key={index} alignItems="center" gap="6px" padding="6px 10px" borderRadius="8px" border="1px solid #E2E8F0" backgroundColor="color-white" animate={{
+                    from: { opacity: 0, scale: 0.9 },
+                    to: { opacity: 1, scale: 1 },
+                }} animationDuration={0.2} {...views?.item}>
+            {showPreviews && (<HoverCard>
+                <HoverCard.Trigger>
+                  {isImage && (<Image src={previewUrl} alt={file.name} width="60px" height="60px" borderRadius="8px" objectFit="cover"/>)}
+                  {isVideo && (<View as="video" src={previewUrl} alt={file.name} controls={false} muted={true} width="60px" height="60px" borderRadius="8px" objectFit="cover"/>)}
+                  {isAudio && (<Center width="60px" height="60px" borderRadius="8px" backgroundColor="color-gray-100">
+                      <AudioIcon widthHeight={24} color="color-black"/>
+                    </Center>)}
+                  {!isImage && !isVideo && !isAudio && (<Center width="60px" height="60px" borderRadius="8px" backgroundColor="color-gray-100">
+                      <FileIcon widthHeight={24} color="color-black"/>
+                    </Center>)}
+                  {onRemove && (<Button {...DefaultAgentChatStyles.attachmentRemove} onClick={(e) => {
+                            e.stopPropagation();
+                            onRemove(index);
+                        }} aria-label={`Remove ${file.name}`}>
+                      ×
+                    </Button>)}
+                </HoverCard.Trigger>
+                <HoverCard.Content>
+                  {isImage && (<Image src={previewUrl} alt={file.name} maxWidth="100%"/>)}
+                  {isVideo && (<View as="video" src={previewUrl} controls maxWidth="100%"/>)}
+                  {isAudio && (<View as="audio" src={previewUrl} controls width={'100%'}/>)}
+                  <Text marginTop="4px" maxLines={1} width={'100%'} {...views?.name}>
+                    {file.name} ({formatFileSize(file.size)})
+                  </Text>
+                </HoverCard.Content>
+              </HoverCard>)}
+          </Vertical>);
+        })}
+    </View>);
+};
+//# sourceMappingURL=AttachmentGroup.js.map

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

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

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

@@ -0,0 +1,10 @@
+import React from 'react';
+interface AudioRecorderProps {
+    onRecordingComplete: (file: File) => void;
+    onRecordingStart?: () => void;
+    views?: {
+        button?: any;
+    };
+}
+export declare const AudioRecorder: React.FC<AudioRecorderProps>;
+export {};