@terreno/ui 0.2.0 → 0.3.0

package/src/AIRequestExplorer.tsx

@@ -0,0 +1,147 @@
+import React from "react";
+
+import {Box} from "./Box";
+import type {DataTableColumn} from "./Common";
+import {DataTable} from "./DataTable";
+import {DateTimeField} from "./DateTimeField";
+import {Heading} from "./Heading";
+import {MultiselectField} from "./MultiselectField";
+import {Pagination} from "./Pagination";
+import {Spinner} from "./Spinner";
+import {Text} from "./Text";
+
+export interface AIRequestExplorerData {
+  aiModel: string;
+  created: string;
+  error?: string;
+  prompt: string;
+  requestType: string;
+  response?: string;
+  responseTime?: number;
+  tokensUsed?: number;
+  user?: {email?: string; name?: string};
+}
+
+export interface AIRequestExplorerProps {
+  data: AIRequestExplorerData[];
+  endDate?: string;
+  isLoading?: boolean;
+  onEndDateChange?: (date: string) => void;
+  onPageChange: (page: number) => void;
+  onRequestTypeFilterChange?: (types: string[]) => void;
+  onStartDateChange?: (date: string) => void;
+  page: number;
+  requestTypeFilter?: string[];
+  startDate?: string;
+  testID?: string;
+  totalCount: number;
+  totalPages: number;
+}
+
+const REQUEST_TYPE_OPTIONS = [
+  {label: "General", value: "general"},
+  {label: "Remix", value: "remix"},
+  {label: "Summarization", value: "summarization"},
+  {label: "Translation", value: "translation"},
+];
+
+const COLUMNS: DataTableColumn[] = [
+  {columnType: "text", title: "Type", width: 120},
+  {columnType: "text", title: "Model", width: 150},
+  {columnType: "text", title: "User", width: 150},
+  {columnType: "text", title: "Prompt", width: 250},
+  {columnType: "text", title: "Response", width: 250},
+  {columnType: "number", title: "Tokens", width: 80},
+  {columnType: "text", title: "Time (ms)", width: 100},
+  {columnType: "text", title: "Created", width: 180},
+  {columnType: "text", title: "Error", width: 150},
+];
+
+const formatRow = (item: AIRequestExplorerData) => {
+  return [
+    {value: item.requestType},
+    {value: item.aiModel},
+    {value: item.user?.name ?? item.user?.email ?? "-"},
+    {value: item.prompt ?? "-"},
+    {value: item.response ?? "-"},
+    {value: item.tokensUsed?.toString() ?? "-"},
+    {value: item.responseTime != null ? `${item.responseTime}ms` : "-"},
+    {value: item.created ? new Date(item.created).toLocaleString() : "-"},
+    {value: item.error ?? ""},
+  ];
+};
+
+export const AIRequestExplorer = ({
+  data,
+  endDate,
+  isLoading = false,
+  onEndDateChange,
+  onPageChange,
+  onRequestTypeFilterChange,
+  onStartDateChange,
+  page,
+  requestTypeFilter,
+  startDate,
+  testID,
+  totalCount,
+  totalPages,
+}: AIRequestExplorerProps): React.ReactElement => {
+  return (
+    <Box direction="column" flex="grow" gap={4} padding={4} testID={testID}>
+      <Heading size="lg">AI Request Explorer</Heading>
+      <Text color="secondaryDark" size="sm">
+        {totalCount} total requests
+      </Text>
+
+      {/* Filters */}
+      <Box direction="row" gap={3} wrap>
+        {onRequestTypeFilterChange ? (
+          <Box minWidth={200}>
+            <MultiselectField
+              onChange={onRequestTypeFilterChange}
+              options={REQUEST_TYPE_OPTIONS}
+              title="Request Type"
+              value={requestTypeFilter ?? []}
+            />
+          </Box>
+        ) : null}
+        {onStartDateChange ? (
+          <Box minWidth={200}>
+            <DateTimeField
+              onChange={onStartDateChange}
+              title="Start Date"
+              type="datetime"
+              value={startDate ?? ""}
+            />
+          </Box>
+        ) : null}
+        {onEndDateChange ? (
+          <Box minWidth={200}>
+            <DateTimeField
+              onChange={onEndDateChange}
+              title="End Date"
+              type="datetime"
+              value={endDate ?? ""}
+            />
+          </Box>
+        ) : null}
+      </Box>
+
+      {/* Table */}
+      {isLoading ? (
+        <Box alignItems="center" padding={6}>
+          <Spinner />
+        </Box>
+      ) : (
+        <DataTable alternateRowBackground columns={COLUMNS} data={data.map(formatRow)} />
+      )}
+
+      {/* Pagination */}
+      {totalPages > 1 ? (
+        <Box alignItems="center">
+          <Pagination page={page} setPage={onPageChange} totalPages={totalPages} />
+        </Box>
+      ) : null}
+    </Box>
+  );
+};

package/src/AttachmentPreview.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import {Image as RNImage} from "react-native";
+
+import {Box} from "./Box";
+import {DismissButton} from "./DismissButton";
+import type {SelectedFile} from "./FilePickerButton";
+import {Icon} from "./Icon";
+import {Text} from "./Text";
+
+export interface AttachmentPreviewProps {
+  attachments: SelectedFile[];
+  onRemove: (index: number) => void;
+  testID?: string;
+}
+
+const isImageMimeType = (mimeType: string): boolean => {
+  return mimeType.startsWith("image/");
+};
+
+export const AttachmentPreview = ({
+  attachments,
+  onRemove,
+  testID,
+}: AttachmentPreviewProps): React.ReactElement | null => {
+  if (attachments.length === 0) {
+    return null;
+  }
+
+  return (
+    <Box direction="row" gap={2} padding={2} testID={testID ?? "attachment-preview"} wrap>
+      {attachments.map((attachment, index) => (
+        <Box
+          alignItems="center"
+          border="default"
+          direction="row"
+          gap={1}
+          key={`attachment-${index}`}
+          padding={1}
+          rounding="md"
+        >
+          {isImageMimeType(attachment.mimeType) ? (
+            <RNImage
+              source={{uri: attachment.uri}}
+              style={{borderRadius: 4, height: 40, width: 40}}
+            />
+          ) : (
+            <Box alignItems="center" justifyContent="center" padding={1}>
+              <Icon iconName="file" size="sm" />
+            </Box>
+          )}
+          <Text size="sm" truncate>
+            {attachment.name}
+          </Text>
+          <DismissButton
+            accessibilityHint="Removes this attachment"
+            accessibilityLabel={`Remove ${attachment.name}`}
+            onClick={() => onRemove(index)}
+          />
+        </Box>
+      ))}
+    </Box>
+  );
+};

package/src/FilePickerButton.tsx

@@ -0,0 +1,88 @@
+import React, {useCallback, useState} from "react";
+
+import {Box} from "./Box";
+import {Button} from "./Button";
+import {IconButton} from "./IconButton";
+import {Modal} from "./Modal";
+
+export interface SelectedFile {
+  mimeType: string;
+  name: string;
+  uri: string;
+}
+
+export interface FilePickerButtonProps {
+  disabled?: boolean;
+  multiple?: boolean;
+  onFilesSelected: (files: SelectedFile[]) => void;
+  testID?: string;
+}
+
+export const FilePickerButton = ({
+  disabled = false,
+  multiple = false,
+  onFilesSelected,
+  testID,
+}: FilePickerButtonProps): React.ReactElement => {
+  const [showModal, setShowModal] = useState(false);
+
+  const handlePickImage = useCallback(async () => {
+    setShowModal(false);
+    const ImagePicker = await import("expo-image-picker");
+    const result = await ImagePicker.launchImageLibraryAsync({
+      allowsMultipleSelection: multiple,
+      mediaTypes: ["images"],
+      quality: 0.8,
+    });
+
+    if (!result.canceled && result.assets.length > 0) {
+      const files: SelectedFile[] = result.assets.map((asset) => ({
+        mimeType: asset.mimeType ?? "image/jpeg",
+        name: asset.fileName ?? `image-${Date.now()}.jpg`,
+        uri: asset.uri,
+      }));
+      onFilesSelected(files);
+    }
+  }, [multiple, onFilesSelected]);
+
+  const handlePickDocument = useCallback(async () => {
+    setShowModal(false);
+    const DocumentPicker = await import("expo-document-picker");
+    const result = await DocumentPicker.getDocumentAsync({
+      multiple,
+      type: ["application/pdf", "text/plain", "text/csv", "application/json"],
+    });
+
+    if (!result.canceled && result.assets.length > 0) {
+      const files: SelectedFile[] = result.assets.map((asset) => ({
+        mimeType: asset.mimeType ?? "application/octet-stream",
+        name: asset.name,
+        uri: asset.uri,
+      }));
+      onFilesSelected(files);
+    }
+  }, [multiple, onFilesSelected]);
+
+  return (
+    <>
+      <IconButton
+        accessibilityLabel="Attach file"
+        disabled={disabled}
+        iconName="paperclip"
+        onClick={() => setShowModal(true)}
+        testID={testID ?? "file-picker-button"}
+      />
+      <Modal onDismiss={() => setShowModal(false)} size="sm" title="Attach" visible={showModal}>
+        <Box gap={2} padding={3}>
+          <Button
+            iconName="image"
+            onClick={handlePickImage}
+            text="Photo Library"
+            variant="outline"
+          />
+          <Button iconName="file" onClick={handlePickDocument} text="Document" variant="outline" />
+        </Box>
+      </Modal>
+    </>
+  );
+};