@vanira/sdk-react-native 0.0.2

package/src/presets/UploadModal.tsx

@@ -0,0 +1,321 @@
+import React, {useCallback, useEffect, useMemo, useState} from 'react';
+import {
+  ActivityIndicator,
+  Alert,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import {PresetShellModal} from './PresetShellModal';
+import type {PresetClient, PresetContext} from './types';
+import {pickUploadFile} from './upload/pickUploadFile';
+import {
+  filePreviewIcon,
+  WEB_DEFAULT_UPLOAD_ACCEPT,
+} from './upload/uploadFormats';
+import {formatAcceptHint} from './upload/uploadUtils';
+
+type Props = {
+  visible: boolean;
+  ctx: PresetContext;
+  client: PresetClient | null;
+  onClose: () => void;
+  onCancel: (reason?: string) => void;
+  onComplete: (payload: Record<string, unknown>) => void;
+};
+
+const SUCCESS_DELAY_MS = 400;
+
+export function UploadModal({
+  visible,
+  ctx,
+  client,
+  onClose,
+  onCancel,
+  onComplete,
+}: Props) {
+  const merged = useMemo(
+    () => ({...ctx.args, ...ctx.clientFields}),
+    [ctx.args, ctx.clientFields],
+  );
+
+  const title = String(merged.title ?? 'Upload a File');
+  const description = String(
+    merged.description ?? 'Select a file to send to your agent.',
+  );
+  const reason = String(merged.reason ?? ctx.args.reason ?? 'upload');
+  const accept = String(
+    merged.accept ?? ctx.clientFields.accept ?? WEB_DEFAULT_UPLOAD_ACCEPT,
+  );
+  const acceptHint = formatAcceptHint(accept);
+
+  const [selectedFile, setSelectedFile] = useState<{
+    uri: string;
+    type: string;
+    name: string;
+    size?: number;
+  } | null>(null);
+  const [uploading, setUploading] = useState(false);
+  const [picking, setPicking] = useState(false);
+  const [statusMessage, setStatusMessage] = useState<string | null>(null);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!visible) {
+      return;
+    }
+    setSelectedFile(null);
+    setUploading(false);
+    setPicking(false);
+    setStatusMessage(null);
+    setErrorMessage(null);
+  }, [visible, ctx.toolCallId]);
+
+  const resetSelection = useCallback(() => {
+    setSelectedFile(null);
+    setStatusMessage(null);
+    setErrorMessage(null);
+    setUploading(false);
+  }, []);
+
+  const pickFile = useCallback(async () => {
+    if (uploading || picking) {
+      return;
+    }
+
+    setPicking(true);
+    setErrorMessage(null);
+
+    const result = await pickUploadFile(accept);
+    setPicking(false);
+
+    switch (result.status) {
+      case 'ok':
+        setSelectedFile(result.file);
+        setStatusMessage(null);
+        break;
+      case 'cancelled':
+        break;
+      case 'permission_denied':
+        Alert.alert(
+          'Photos',
+          'Photo library access is needed to choose images.',
+        );
+        break;
+      case 'unsupported_type':
+        setErrorMessage(
+          'That file type is not supported. Try JPEG, PNG, PDF, TXT, or CSV.',
+        );
+        break;
+      case 'error':
+        setErrorMessage(result.message);
+        break;
+    }
+  }, [accept, picking, uploading]);
+
+  const handleSubmit = useCallback(async () => {
+    if (!selectedFile || uploading) {
+      return;
+    }
+
+    if (!client?.uploadMedia) {
+      setErrorMessage('Upload is not available — start a voice call first.');
+      return;
+    }
+
+    setUploading(true);
+    setErrorMessage(null);
+    setStatusMessage('Uploading…');
+
+    try {
+      const response = await client.uploadMedia(
+        selectedFile,
+        reason,
+        `User uploaded: ${selectedFile.name}`,
+      );
+
+      setStatusMessage('✓ File sent!');
+      setTimeout(() => {
+        setUploading(false);
+        onComplete({
+          file_name: selectedFile.name,
+          file_type: selectedFile.type,
+          file_size: selectedFile.size ?? 0,
+          media_id: response.media_id,
+          url: response.url,
+          message: `User uploaded: ${selectedFile.name}`,
+        });
+      }, SUCCESS_DELAY_MS);
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : 'Upload failed. Please try again.';
+      setUploading(false);
+      setStatusMessage(null);
+      setErrorMessage(message);
+    }
+  }, [client, onComplete, reason, selectedFile, uploading]);
+
+  const fileSizeLabel =
+    selectedFile?.size !== undefined
+      ? `${(selectedFile.size / 1024).toFixed(1)} KB`
+      : 'unknown size';
+
+  const previewIcon = selectedFile
+    ? filePreviewIcon(selectedFile.type)
+    : '📁';
+
+  return (
+    <PresetShellModal
+      visible={visible}
+      title={title}
+      subtitle={description}
+      onClose={onClose}
+      hideDefaultClose>
+      {!selectedFile ? (
+        <Pressable
+          style={styles.dropzone}
+          onPress={pickFile}
+          disabled={uploading || picking}>
+          {picking ? (
+            <ActivityIndicator color="#4f46e5" />
+          ) : (
+            <Text style={styles.dropzoneIcon}>📁</Text>
+          )}
+          <Text style={styles.dropzoneTitle}>
+            {picking ? 'Opening file picker…' : 'Tap to choose a file'}
+          </Text>
+          <Text style={styles.dropzoneHint}>{acceptHint}</Text>
+        </Pressable>
+      ) : (
+        <View style={styles.preview}>
+          <Text style={styles.previewIcon}>{previewIcon}</Text>
+          <View style={styles.previewMeta}>
+            <Text style={styles.previewName} numberOfLines={1}>
+              {selectedFile.name}
+            </Text>
+            <Text style={styles.previewSub}>
+              {selectedFile.type} · {fileSizeLabel}
+            </Text>
+          </View>
+          <Pressable
+            style={styles.removeBtn}
+            onPress={resetSelection}
+            disabled={uploading}>
+            <Text style={styles.removeBtnText}>✕</Text>
+          </Pressable>
+        </View>
+      )}
+
+      {statusMessage ? (
+        <View style={styles.statusRow}>
+          {uploading ? <ActivityIndicator color="#4f46e5" /> : null}
+          <Text style={styles.statusText}>{statusMessage}</Text>
+        </View>
+      ) : null}
+      {errorMessage ? <Text style={styles.errorText}>{errorMessage}</Text> : null}
+
+      <View style={styles.actions}>
+        <Pressable
+          style={styles.cancelBtn}
+          onPress={() => onCancel('User cancelled')}
+          disabled={uploading}>
+          <Text style={styles.cancelBtnText}>Cancel</Text>
+        </Pressable>
+        <Pressable
+          style={[
+            styles.submitBtn,
+            (!selectedFile || uploading) && styles.submitDisabled,
+          ]}
+          onPress={handleSubmit}
+          disabled={!selectedFile || uploading}>
+          {uploading ? (
+            <ActivityIndicator color="#fff" />
+          ) : (
+            <Text style={styles.submitBtnText}>Upload & Send</Text>
+          )}
+        </Pressable>
+      </View>
+    </PresetShellModal>
+  );
+}
+
+const styles = StyleSheet.create({
+  dropzone: {
+    borderWidth: 2,
+    borderColor: '#e5e7eb',
+    borderStyle: 'dashed',
+    borderRadius: 12,
+    paddingVertical: 28,
+    alignItems: 'center',
+    backgroundColor: '#f9fafb',
+    gap: 6,
+  },
+  dropzoneIcon: {fontSize: 32, marginBottom: 4},
+  dropzoneTitle: {fontSize: 14, fontWeight: '600', color: '#374151'},
+  dropzoneHint: {
+    fontSize: 12,
+    color: '#9ca3af',
+    marginTop: 2,
+    textAlign: 'center',
+    paddingHorizontal: 12,
+  },
+  preview: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10,
+    borderWidth: 1,
+    borderColor: '#e5e7eb',
+    borderRadius: 12,
+    padding: 14,
+    backgroundColor: '#f9fafb',
+  },
+  previewIcon: {fontSize: 28},
+  previewMeta: {flex: 1, minWidth: 0},
+  previewName: {fontSize: 13, fontWeight: '600', color: '#111'},
+  previewSub: {fontSize: 11, color: '#6b7280', marginTop: 3},
+  removeBtn: {
+    width: 30,
+    height: 30,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: '#e5e7eb',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#fff',
+  },
+  removeBtnText: {color: '#6b7280', fontWeight: '700'},
+  statusRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    marginTop: 12,
+    justifyContent: 'center',
+  },
+  statusText: {fontSize: 13, color: '#22c55e', fontWeight: '600'},
+  errorText: {
+    fontSize: 13,
+    color: '#ef4444',
+    textAlign: 'center',
+    marginTop: 12,
+  },
+  actions: {flexDirection: 'row', gap: 10, marginTop: 14},
+  cancelBtn: {
+    flex: 1,
+    paddingVertical: 12,
+    borderRadius: 10,
+    backgroundColor: '#f3f4f6',
+    alignItems: 'center',
+  },
+  cancelBtnText: {color: '#111', fontWeight: '600'},
+  submitBtn: {
+    flex: 1,
+    paddingVertical: 12,
+    borderRadius: 10,
+    backgroundColor: '#4f46e5',
+    alignItems: 'center',
+    justifyContent: 'center',
+    minHeight: 44,
+  },
+  submitBtnDisabled: {opacity: 0.5},
+  submitBtnText: {color: '#fff', fontWeight: '700'},
+});

package/src/presets/calendar/calendarUtils.ts

@@ -0,0 +1,386 @@
+/**
+ * Calendar helpers — ported from vanira-sdk WidgetPresetRenderer (web source of truth).
+ */
+
+export const FALLBACK_SLOTS = [
+  '09:00 AM',
+  '10:30 AM',
+  '01:00 PM',
+  '02:30 PM',
+  '04:00 PM',
+] as const;
+
+export type SlotItem = string | Record<string, unknown>;
+
+export function formatSlotTime(item: SlotItem | null | undefined): string {
+  if (!item) {
+    return '';
+  }
+  if (typeof item === 'string') {
+    if (item.includes('T') || !Number.isNaN(Date.parse(item))) {
+      try {
+        return new Date(item).toLocaleTimeString('en-US', {
+          hour: '2-digit',
+          minute: '2-digit',
+        });
+      } catch {
+        /* fall through */
+      }
+    }
+    return item;
+  }
+  if (typeof item === 'object') {
+    const sv =
+      item.start || item.startTime || item.time || item.slot;
+    const ev = item.end || item.endTime;
+    if (sv) {
+      let s = String(sv);
+      let e = ev ? String(ev) : '';
+      try {
+        if (s.includes('T') || !Number.isNaN(Date.parse(s))) {
+          s = new Date(s).toLocaleTimeString('en-US', {
+            hour: '2-digit',
+            minute: '2-digit',
+          });
+        }
+        if (e && (e.includes('T') || !Number.isNaN(Date.parse(e)))) {
+          e = new Date(e).toLocaleTimeString('en-US', {
+            hour: '2-digit',
+            minute: '2-digit',
+          });
+        }
+      } catch {
+        /* keep raw */
+      }
+      if (e) {
+        return `${s} - ${e}`;
+      }
+      return s;
+    }
+  }
+  return String(item);
+}
+
+export function getDayBoundsInTimezone(
+  y: number,
+  month: number,
+  day: number,
+  timezone?: string,
+): {start: Date; end: Date} {
+  let startMs = Date.UTC(y, month, day, 0, 0, 0, 0);
+  let endMs = Date.UTC(y, month, day, 23, 59, 59, 999);
+
+  if (timezone) {
+    try {
+      const noonUtc = new Date(Date.UTC(y, month, day, 12, 0, 0));
+      const formatter = new Intl.DateTimeFormat('en-US', {
+        timeZone: timezone,
+        year: 'numeric',
+        month: 'numeric',
+        day: 'numeric',
+        hour: 'numeric',
+        minute: 'numeric',
+        second: 'numeric',
+        hour12: false,
+      });
+      const parts = formatter.formatToParts(noonUtc);
+      const getPart = (type: string) =>
+        parts.find(p => p.type === type)?.value;
+
+      const yr = parseInt(getPart('year') || '0', 10);
+      const mo = parseInt(getPart('month') || '0', 10) - 1;
+      const dy = parseInt(getPart('day') || '0', 10);
+      const hr = parseInt(getPart('hour') || '0', 10);
+      const min = parseInt(getPart('minute') || '0', 10);
+      const sec = parseInt(getPart('second') || '0', 10);
+      const hourNormalized = hr === 24 ? 0 : hr;
+
+      const targetUtc = Date.UTC(yr, mo, dy, hourNormalized, min, sec, 0);
+      const offsetMs = targetUtc - noonUtc.getTime();
+
+      startMs = Date.UTC(y, month, day, 0, 0, 0, 0) - offsetMs;
+      endMs = Date.UTC(y, month, day, 23, 59, 59, 999) - offsetMs;
+    } catch (e) {
+      console.warn(
+        `[calendarUtils] Failed day bounds for timezone ${timezone}:`,
+        e,
+      );
+    }
+  }
+
+  return {start: new Date(startMs), end: new Date(endMs)};
+}
+
+export function toTimezoneISOString(date: Date, timeZone?: string): string {
+  if (!timeZone) {
+    const tzOffset = -date.getTimezoneOffset();
+    const diff = tzOffset >= 0 ? '+' : '-';
+    const pad = (num: number) => String(num).padStart(2, '0');
+    const pad3 = (num: number) => String(num).padStart(3, '0');
+    return (
+      date.getFullYear() +
+      '-' +
+      pad(date.getMonth() + 1) +
+      '-' +
+      pad(date.getDate()) +
+      'T' +
+      pad(date.getHours()) +
+      ':' +
+      pad(date.getMinutes()) +
+      ':' +
+      pad(date.getSeconds()) +
+      '.' +
+      pad3(date.getMilliseconds()) +
+      diff +
+      pad(Math.floor(Math.abs(tzOffset) / 60)) +
+      ':' +
+      pad(Math.abs(tzOffset) % 60)
+    );
+  }
+
+  try {
+    const formatter = new Intl.DateTimeFormat('en-US', {
+      timeZone,
+      year: 'numeric',
+      month: 'numeric',
+      day: 'numeric',
+      hour: 'numeric',
+      minute: 'numeric',
+      second: 'numeric',
+      hour12: false,
+    });
+    const parts = formatter.formatToParts(date);
+    const getPart = (type: string) =>
+      parts.find(p => p.type === type)?.value || '0';
+
+    const yr = getPart('year');
+    const mo = getPart('month').padStart(2, '0');
+    const dy = getPart('day').padStart(2, '0');
+    let hr = parseInt(getPart('hour'), 10);
+    if (hr === 24) {
+      hr = 0;
+    }
+    const hrStr = String(hr).padStart(2, '0');
+    const min = getPart('minute').padStart(2, '0');
+    const sec = getPart('second').padStart(2, '0');
+    const ms = String(date.getMilliseconds()).padStart(3, '0');
+
+    const yrInt = parseInt(yr, 10);
+    const moInt = parseInt(mo, 10) - 1;
+    const dyInt = parseInt(dy, 10);
+    const targetUtc = Date.UTC(
+      yrInt,
+      moInt,
+      dyInt,
+      hr,
+      parseInt(min, 10),
+      parseInt(sec, 10),
+      date.getMilliseconds(),
+    );
+    const offsetMs = targetUtc - date.getTime();
+    const offsetMin = Math.round(offsetMs / 60000);
+    const diff = offsetMin >= 0 ? '+' : '-';
+    const absOffsetMin = Math.abs(offsetMin);
+    const offsetHrStr = String(Math.floor(absOffsetMin / 60)).padStart(2, '0');
+    const offsetMinStr = String(absOffsetMin % 60).padStart(2, '0');
+
+    return `${yr}-${mo}-${dy}T${hrStr}:${min}:${sec}.${ms}${diff}${offsetHrStr}:${offsetMinStr}`;
+  } catch (e) {
+    console.warn(`[calendarUtils] timezone ISO format failed for ${timeZone}:`, e);
+    return date.toISOString();
+  }
+}
+
+export function startOfLocalDay(year: number, month: number, day: number): number {
+  const d = new Date(year, month, day);
+  d.setHours(0, 0, 0, 0);
+  return d.getTime();
+}
+
+export function parseSlotsResponse(data: unknown): SlotItem[] {
+  if (Array.isArray(data)) {
+    return data as SlotItem[];
+  }
+  if (data && typeof data === 'object') {
+    const obj = data as Record<string, unknown>;
+    for (const key of ['slots', 'free_slots', 'times', 'data', 'available_slots']) {
+      if (Array.isArray(obj[key])) {
+        return obj[key] as SlotItem[];
+      }
+    }
+  }
+  return [];
+}
+
+function replaceTemplate(
+  val: string,
+  dateStr: string,
+  timezone: string,
+  startOfDay: Date,
+  endOfDay: Date,
+  clientFields: Record<string, unknown>,
+): string {
+  let replaced = val
+    .replace(/\{\{date\}\}/g, dateStr)
+    .replace(/\{\{timezone\}\}/g, timezone)
+    .replace(/\{\{start_of_day\}\}/g, startOfDay.toISOString())
+    .replace(/\{\{end_of_day\}\}/g, endOfDay.toISOString());
+
+  Object.entries(clientFields).forEach(([k, v]) => {
+    if (v !== undefined && v !== null) {
+      const escapedKey = k.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&');
+      const regex = new RegExp(`\\{\\{${escapedKey}\\}\\}`, 'g');
+      replaced = replaced.replace(regex, String(v));
+    }
+  });
+  return replaced;
+}
+
+export type SlotsFetchRequest = {
+  url: string;
+  method: string;
+  headers: Record<string, string>;
+  body?: string;
+};
+
+/** Build slots API request — mirrors WidgetPresetRenderer.loadSlots. */
+export function buildSlotsFetchRequest(
+  selectedTs: number,
+  mergedClientFields: Record<string, unknown>,
+): SlotsFetchRequest | null {
+  const slotsApiUrl = mergedClientFields.slots_api_url;
+  if (!slotsApiUrl || typeof slotsApiUrl !== 'string') {
+    return null;
+  }
+
+  const dateObj = new Date(selectedTs);
+  const y = dateObj.getFullYear();
+  const m = String(dateObj.getMonth() + 1).padStart(2, '0');
+  const d = String(dateObj.getDate()).padStart(2, '0');
+  const dateStr = `${y}-${m}-${d}`;
+  const tzStr = String(mergedClientFields.timezone ?? '');
+  const bounds = getDayBoundsInTimezone(
+    y,
+    dateObj.getMonth(),
+    dateObj.getDate(),
+    tzStr || undefined,
+  );
+
+  const rp = (val: string) =>
+    replaceTemplate(
+      val,
+      dateStr,
+      tzStr,
+      bounds.start,
+      bounds.end,
+      mergedClientFields,
+    );
+
+  const method = String(
+    mergedClientFields.slots_api_method || 'GET',
+  ).toUpperCase();
+  const headers: Record<string, string> = {'Content-Type': 'application/json'};
+  try {
+    const parsed = JSON.parse(
+      String(mergedClientFields.slots_api_headers || '{}'),
+    ) as Record<string, unknown>;
+    Object.entries(parsed).forEach(([k, v]) => {
+      headers[k] = rp(String(v));
+    });
+  } catch {
+    /* ignore bad headers JSON */
+  }
+
+  let bodyObj: Record<string, unknown> = {};
+  try {
+    const parsed = JSON.parse(
+      String(mergedClientFields.slots_api_body || '{}'),
+    ) as Record<string, unknown>;
+    Object.entries(parsed).forEach(([k, v]) => {
+      bodyObj[k] = rp(String(v));
+    });
+  } catch {
+    /* ignore bad body JSON */
+  }
+
+  let url = rp(slotsApiUrl);
+  let body: string | undefined;
+
+  if (method === 'GET') {
+    const qs = new URLSearchParams(
+      Object.entries(bodyObj).map(([k, v]) => [k, String(v)]),
+    ).toString();
+    if (qs) {
+      url += url.includes('?') ? `&${qs}` : `?${qs}`;
+    }
+  } else {
+    body = JSON.stringify(bodyObj);
+  }
+
+  return {url, method, headers, body};
+}
+
+export function slotsAreEqual(a: SlotItem | null, b: SlotItem | null): boolean {
+  if (a === null || b === null) {
+    return false;
+  }
+  if (typeof a === 'object' && typeof b === 'object') {
+    return JSON.stringify(a) === JSON.stringify(b);
+  }
+  return a === b;
+}
+
+export type CalendarCompletePayload = {
+  date: string;
+  time: string;
+  timestamp: number;
+  formatted: string;
+  slot_data?: Record<string, unknown>;
+};
+
+export function buildCalendarCompletePayload(
+  selectedTs: number,
+  selectedTime: SlotItem,
+  timezone: string,
+): CalendarCompletePayload {
+  const dateObj = new Date(selectedTs);
+  const timeStr = formatSlotTime(selectedTime);
+  const y = dateObj.getFullYear();
+  const m = String(dateObj.getMonth() + 1).padStart(2, '0');
+  const d = String(dateObj.getDate()).padStart(2, '0');
+  const dateStr = `${y}-${m}-${d}`;
+
+  let slotData =
+    typeof selectedTime === 'object'
+      ? {...(selectedTime as Record<string, unknown>)}
+      : undefined;
+
+  if (slotData) {
+    for (const key of ['start', 'startTime', 'end', 'endTime']) {
+      const raw = slotData[key];
+      if (
+        raw &&
+        typeof raw === 'string' &&
+        (raw.includes('T') || !Number.isNaN(Date.parse(raw)))
+      ) {
+        try {
+          slotData[key] = toTimezoneISOString(new Date(raw), timezone || undefined);
+        } catch {
+          /* keep raw */
+        }
+      }
+    }
+  }
+
+  return {
+    date: dateStr,
+    time: timeStr,
+    timestamp: selectedTs,
+    formatted: `${dateObj.toLocaleDateString('en-US', {
+      weekday: 'long',
+      month: 'short',
+      day: 'numeric',
+    })} at ${timeStr}`,
+    ...(slotData ? {slot_data: slotData} : {}),
+  };
+}