@base44/superagent-native 0.0.1

package/src/apiClient.ts

@@ -0,0 +1,189 @@
+import type {
+  QueuedSuperagentMessage,
+  SuperagentConversation,
+  SuperagentMessage,
+  SuperagentNativeClient,
+  SuperagentNativeClientConfig,
+  SuperagentPaginatedMessages,
+} from './types';
+
+type QueryValue = string | number | boolean | undefined;
+
+export function createSuperagentNativeClient({
+  apiBaseUrl,
+  appId,
+  getAuthToken,
+  getHeaders,
+}: SuperagentNativeClientConfig): SuperagentNativeClient {
+  const request = async <TResponse>(
+    method: string,
+    path: string,
+    options: {
+      body?: unknown;
+      query?: Record<string, QueryValue>;
+      headers?: Record<string, string>;
+    } = {},
+  ): Promise<TResponse> => {
+    const token = await getAuthToken();
+    const extraHeaders = await getHeaders?.();
+    const response = await fetch(buildUrl(apiBaseUrl, path, options.query), {
+      method,
+      headers: {
+        ...(options.body === undefined ? {} : { 'Content-Type': 'application/json' }),
+        ...(token ? { Authorization: `Bearer ${token}` } : {}),
+        ...extraHeaders,
+        ...options.headers,
+      },
+      body: options.body === undefined ? undefined : JSON.stringify(options.body),
+    });
+
+    if (!response.ok) {
+      throw await createClientError(response);
+    }
+
+    if (response.status === 204) {
+      return undefined as TResponse;
+    }
+
+    return response.json() as Promise<TResponse>;
+  };
+
+  const basePath = `/${pathSegment(appId, 'appId')}/user-agent/conversations`;
+
+  return {
+    getConversations(limit = 1) {
+      return request<SuperagentConversation[]>('GET', basePath, {
+        query: { sort: '-updated_date', limit },
+      });
+    },
+    getConversation(conversationId) {
+      return request<SuperagentConversation>('GET', `${basePath}/${pathSegment(conversationId, 'conversationId')}`);
+    },
+    getMessages(conversationId, params = {}) {
+      return request<SuperagentPaginatedMessages>('GET', `${basePath}/${pathSegment(conversationId, 'conversationId')}/messages`, {
+        query: params,
+      });
+    },
+    createConversation(metadata = {}) {
+      return request<SuperagentConversation>('POST', basePath, { body: { metadata } });
+    },
+    addMessage(conversationId, message) {
+      return request('POST', `${basePath}/${pathSegment(conversationId, 'conversationId')}/messages`, {
+        body: serializeMessageForBackend(message),
+      });
+    },
+    stopConversation(conversationId) {
+      return request<void>('POST', `${basePath}/${pathSegment(conversationId, 'conversationId')}/stop`);
+    },
+    getQueuedMessages(conversationId) {
+      return request<{ messages: QueuedSuperagentMessage[] }>(
+        'GET',
+        `${basePath}/${pathSegment(conversationId, 'conversationId')}/queued-messages`,
+      );
+    },
+    editQueuedMessage(conversationId, messageId, content) {
+      return request<{ ok: boolean }>(
+        'PUT',
+        `${basePath}/${pathSegment(conversationId, 'conversationId')}/queued-messages/${pathSegment(messageId, 'messageId')}`,
+        { body: { content } },
+      );
+    },
+    deleteQueuedMessage(conversationId, messageId) {
+      return request<{ ok: boolean }>(
+        'DELETE',
+        `${basePath}/${pathSegment(conversationId, 'conversationId')}/queued-messages/${pathSegment(messageId, 'messageId')}`,
+      );
+    },
+    deleteMessage(conversationId, messageId) {
+      return request<{ message: string }>(
+        'DELETE',
+        `${basePath}/${pathSegment(conversationId, 'conversationId')}/messages/${pathSegment(messageId, 'messageId')}`,
+      );
+    },
+    submitToolCallInput(conversationId, toolCallId, approve, extraUserInput, originRequestId) {
+      return request<SuperagentConversation>(
+        'POST',
+        `${basePath}/${pathSegment(conversationId, 'conversationId')}/submit-tool-call-input`,
+        {
+          body: {
+            tool_call_id: toolCallId,
+            action: approve ? 'approved' : 'rejected',
+            extra_user_input: extraUserInput,
+          },
+          headers: originRequestId ? { 'X-Request-ID': originRequestId } : undefined,
+        },
+      );
+    },
+  };
+}
+
+function buildUrl(baseUrl: string, path: string, query?: Record<string, QueryValue>) {
+  const normalizedBase = baseUrl.endsWith('/') ? baseUrl.slice(0, -1) : baseUrl;
+  const url = `${normalizedBase}${path}`;
+  const queryString = buildQueryString(query);
+  return queryString ? `${url}?${queryString}` : url;
+}
+
+function buildQueryString(query?: Record<string, QueryValue>) {
+  return Object.entries(query ?? {})
+    .filter(([, value]) => value !== undefined)
+    .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(String(value))}`)
+    .join('&');
+}
+
+function pathSegment(value: string, name: string) {
+  if (!value || value.includes('\0')) {
+    throw new Error(`Invalid ${name}`);
+  }
+
+  return encodeURIComponent(value);
+}
+
+async function createClientError(response: Response) {
+  let message = `Request failed with status ${response.status}`;
+
+  try {
+    const body = await response.json();
+    if (typeof body?.message === 'string') message = body.message;
+    else if (typeof body?.detail === 'string') message = body.detail;
+  } catch {
+    // Keep the status-based fallback message.
+  }
+
+  const error = new Error(message) as Error & { status?: number };
+  error.status = response.status;
+  return error;
+}
+
+function serializeMessageForBackend(message: Partial<SuperagentMessage>) {
+  const {
+    createdAt,
+    created_at,
+    fileUrls,
+    file_urls,
+    replyTo,
+    toolCalls,
+    tool_calls,
+    ...backendMessage
+  } = message;
+
+  const additionalParams = {
+    ...backendMessage.additional_message_params,
+    ...(replyTo ? { reply_to: { message_id: replyTo.messageId, content: replyTo.content } } : {}),
+  };
+
+  return omitUndefined({
+    ...backendMessage,
+    file_urls: file_urls ?? fileUrls,
+    tool_calls: tool_calls ?? toolCalls,
+    additional_message_params: Object.keys(additionalParams).length > 0 ? additionalParams : undefined,
+  });
+}
+
+function omitUndefined<T extends Record<string, unknown>>(value: T) {
+  return Object.fromEntries(
+    Object.entries(value).filter(([, entry]) => entry !== undefined),
+  );
+}
+
+export type { SuperagentNativeClient };

package/src/attachmentFileHelpers.ts

@@ -0,0 +1,109 @@
+import type {SuperagentNativeMediaItem} from './useSuperagentAttachmentPicker';
+import {
+  SUPERAGENT_ATTACHMENT_SIZE_LIMIT_MB,
+  SUPERAGENT_SUPPORTED_ATTACHMENT_EXTENSIONS,
+} from './mediaUtils';
+
+export function validateNativeAttachment(item: SuperagentNativeMediaItem, name: string, extension: string) {
+  if (!SUPERAGENT_SUPPORTED_ATTACHMENT_EXTENSIONS.includes(extension as typeof SUPERAGENT_SUPPORTED_ATTACHMENT_EXTENSIONS[number])) {
+    throw new Error(`File type "${extension || 'unknown'}" is not supported.`);
+  }
+
+  const limitMb = SUPERAGENT_ATTACHMENT_SIZE_LIMIT_MB[extension] ?? 5;
+  if (typeof item.size === 'number' && item.size > limitMb * 1024 * 1024) {
+    throw new Error(`File "${name}" exceeds the maximum size of ${limitMb}MB.`);
+  }
+}
+
+export function getUploadName(item: SuperagentNativeMediaItem, index: number) {
+  const baseName = item.name || getNameFromUri(item.uri) || `attachment-${index + 1}`;
+  if (getExtension(baseName)) {
+    return baseName;
+  }
+
+  const extension = getExtension(item.uri) || getExtensionForMimeType(item.mimeType) || '.jpg';
+  return `${baseName}${extension}`;
+}
+
+export function getExtension(value?: string) {
+  const cleanValue = String(value || '').split('?')[0].toLowerCase();
+  const index = cleanValue.lastIndexOf('.');
+  return index >= 0 ? cleanValue.slice(index) : '';
+}
+
+export function getMimeType(item: SuperagentNativeMediaItem, extension: string) {
+  if (item.mimeType) {
+    return item.mimeType;
+  }
+
+  switch (extension) {
+    case '.jpg':
+    case '.jpeg':
+      return 'image/jpeg';
+    case '.png':
+      return 'image/png';
+    case '.webp':
+      return 'image/webp';
+    case '.pdf':
+      return 'application/pdf';
+    case '.csv':
+      return 'text/csv';
+    case '.html':
+      return 'text/html';
+    case '.txt':
+      return 'text/plain';
+    case '.xlsx':
+      return 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
+    case '.docx':
+      return 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
+    case '.json':
+      return 'application/json';
+    case '.md':
+      return 'text/markdown';
+    default:
+      return 'application/octet-stream';
+  }
+}
+
+function getNameFromUri(uri?: string) {
+  if (!uri) {
+    return null;
+  }
+
+  const cleanUri = uri.split('?')[0];
+  const name = cleanUri.split('/').filter(Boolean).pop();
+  if (!name || name.startsWith('ph:')) {
+    return null;
+  }
+
+  try {
+    return decodeURIComponent(name);
+  } catch {
+    return name;
+  }
+}
+
+function getExtensionForMimeType(mimeType?: string) {
+  switch (mimeType) {
+    case 'image/jpeg':
+      return '.jpg';
+    case 'image/png':
+      return '.png';
+    case 'image/webp':
+      return '.webp';
+    case 'application/pdf':
+      return '.pdf';
+    case 'text/plain':
+      return '.txt';
+    case 'text/html':
+      return '.html';
+    case 'text/csv':
+      return '.csv';
+    case 'application/json':
+      return '.json';
+    case 'text/markdown':
+      return '.md';
+    default:
+      return null;
+  }
+}

package/src/attachmentUpload.ts

@@ -0,0 +1,112 @@
+import type {SuperagentMediaActionContext, SuperagentMediaAttachment} from './types';
+import type {
+  SuperagentAttachmentPickerAdapters,
+  SuperagentAttachmentPickerMode,
+  SuperagentNativeMediaItem,
+} from './useSuperagentAttachmentPicker';
+import {
+  getExtension,
+  getMimeType,
+  getUploadName,
+  validateNativeAttachment,
+} from './attachmentFileHelpers';
+
+const MAX_ATTACHMENTS = 10;
+const IMAGE_EXTENSIONS = new Set(['.jpg', '.jpeg', '.png', '.webp']);
+
+export async function pickAndUploadAttachments({
+  authToken,
+  baseUrl,
+  context,
+  mode,
+  nativeAdapters,
+  onUploadStart,
+}: {
+  authToken: string;
+  baseUrl: string;
+  context: SuperagentMediaActionContext;
+  mode: SuperagentAttachmentPickerMode;
+  nativeAdapters: SuperagentAttachmentPickerAdapters;
+  onUploadStart?: (count: number) => void;
+}) {
+  const items = await nativeAdapters.pickNativeMedia(mode);
+  const uploadItems = (items ?? []).filter((item) => Boolean(item?.uri || item?.uploadUri)).slice(0, MAX_ATTACHMENTS);
+  if (!uploadItems.length) {
+    return [];
+  }
+
+  onUploadStart?.(uploadItems.length);
+
+  const attachments: SuperagentMediaAttachment[] = [];
+  for (const [index, item] of uploadItems.entries()) {
+    attachments.push(await uploadNativeItem({authToken, baseUrl, agentId: context.agentId, index, item}));
+  }
+
+  return attachments;
+}
+
+export function getAttachmentPickerErrorMessage(error: unknown) {
+  if (error instanceof Error && error.message) {
+    return error.message;
+  }
+  const candidate = error as {message?: unknown} | null;
+  return typeof candidate?.message === 'string' && candidate.message ?
+    candidate.message :
+    'Failed to attach the selected file.';
+}
+
+async function uploadNativeItem({
+  agentId,
+  authToken,
+  baseUrl,
+  index,
+  item,
+}: {
+  agentId: string;
+  authToken: string;
+  baseUrl: string;
+  index: number;
+  item: SuperagentNativeMediaItem;
+}) {
+  const uri = item.uploadUri ?? item.uri;
+  if (!uri) {
+    throw new Error('The selected file does not have a readable local URI.');
+  }
+
+  const name = getUploadName(item, index);
+  const extension = getExtension(name);
+  validateNativeAttachment(item, name, extension);
+
+  const formData = new FormData();
+  formData.append('file', {
+    name,
+    type: getMimeType(item, extension),
+    uri,
+  } as unknown as Blob);
+
+  const response = await fetch(`${normalizeBaseUrl(baseUrl)}/api/files/apps/${encodeURIComponent(agentId)}/upload`, {
+    body: formData,
+    headers: {
+      Authorization: `Bearer ${authToken}`,
+      'X-Client-Platform': 'mobile_native',
+    },
+    method: 'POST',
+  });
+  const body = await response.json().catch(() => ({}));
+
+  if (!response.ok || typeof body.url !== 'string') {
+    throw new Error(body.message || body.detail || 'Upload failed.');
+  }
+
+  return {
+    kind: IMAGE_EXTENSIONS.has(extension) ? 'image' : 'file',
+    mimeType: getMimeType(item, extension),
+    name,
+    previewUri: item.thumbnailUri ?? item.previewUri ?? item.uri,
+    url: body.url,
+  } satisfies SuperagentMediaAttachment;
+}
+
+function normalizeBaseUrl(url: string) {
+  return url.trim().replace(/\/+$/, '');
+}

package/src/composerStyles.ts

@@ -0,0 +1,167 @@
+import { StyleSheet } from 'react-native';
+
+export const composerStyles = StyleSheet.create({
+  wrap: {
+    alignItems: 'center',
+    backgroundColor: '#000000',
+    paddingBottom: 14,
+    paddingHorizontal: 8,
+    paddingTop: 6,
+  },
+  shell: {
+    alignItems: 'flex-end',
+    backgroundColor: '#151515',
+    borderColor: '#2A2A2A',
+    borderRadius: 28,
+    borderWidth: 1,
+    flexDirection: 'row',
+    minHeight: 58,
+    paddingHorizontal: 7,
+    paddingVertical: 6,
+    position: 'relative',
+    width: '100%',
+  },
+  attachmentMenu: {
+    backgroundColor: 'rgba(22, 22, 22, 0.96)',
+    borderColor: '#2A2A2A',
+    borderRadius: 28,
+    borderWidth: 1,
+    bottom: 64,
+    left: 0,
+    minWidth: 250,
+    overflow: 'hidden',
+    paddingBottom: 10,
+    paddingTop: 10,
+    position: 'absolute',
+    shadowColor: '#000000',
+    shadowOffset: { height: 20, width: 0 },
+    shadowOpacity: 0.35,
+    shadowRadius: 30,
+    zIndex: 20,
+  },
+  attachmentMenuIcon: {
+    alignItems: 'center',
+    backgroundColor: '#252528',
+    borderRadius: 20,
+    height: 40,
+    justifyContent: 'center',
+    marginRight: 16,
+    width: 40,
+  },
+  attachmentMenuItem: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    minHeight: 58,
+    paddingHorizontal: 18,
+  },
+  attachmentMenuItemText: { color: '#F4F4F5', fontSize: 20, fontWeight: '600' },
+  attachmentMenuItemTextDisabled: { color: '#8E8E93' },
+  attachmentMenuSectionLabel: {
+    color: '#A1A1AA',
+    fontSize: 12,
+    fontWeight: '800',
+    marginBottom: 2,
+    marginTop: 8,
+    paddingHorizontal: 18,
+  },
+  iconButton: { alignItems: 'center', borderRadius: 22, height: 44, justifyContent: 'center', minWidth: 44, paddingHorizontal: 9 },
+  iconButtonText: { color: '#F4F4F5', fontSize: 13, fontWeight: '800' },
+  activeButton: { backgroundColor: '#2A2A2A' },
+  disabledButton: { opacity: 0.38 },
+  input: {
+    backgroundColor: '#151515',
+    color: '#F4F4F5',
+    flex: 1,
+    fontSize: 18,
+    lineHeight: 24,
+    maxHeight: 120,
+    minHeight: 44,
+    paddingHorizontal: 6,
+    paddingBottom: 9,
+    paddingTop: 10,
+  },
+  replyPreview: {
+    alignItems: 'center',
+    backgroundColor: '#151515',
+    borderColor: '#2A2A2A',
+    borderRadius: 16,
+    borderWidth: 1,
+    flexDirection: 'row',
+    marginBottom: 8,
+    maxWidth: 900,
+    minHeight: 48,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    width: '100%',
+  },
+  replyPreviewClose: {
+    alignItems: 'center',
+    borderRadius: 15,
+    height: 30,
+    justifyContent: 'center',
+    marginLeft: 8,
+    width: 30,
+  },
+  replyPreviewMarker: {
+    alignSelf: 'stretch',
+    backgroundColor: '#FF5A1F',
+    borderRadius: 2,
+    marginRight: 10,
+    width: 3,
+  },
+  replyPreviewText: {
+    color: '#D4D4D8',
+    flex: 1,
+    fontSize: 14,
+    fontWeight: '700',
+    lineHeight: 19,
+  },
+  sendButton: {
+    alignItems: 'center',
+    backgroundColor: '#F4F4F5',
+    borderRadius: 22,
+    height: 44,
+    justifyContent: 'center',
+    width: 44,
+  },
+  sendButtonDisabled: { backgroundColor: '#2A2A2A' },
+  sendButtonText: { color: '#111111', fontSize: 21, fontWeight: '900', lineHeight: 24 },
+  liveActionButton: { backgroundColor: '#151515', borderColor: '#2A2A2A', borderWidth: 1 },
+  stopButton: {
+    alignItems: 'center',
+    backgroundColor: '#F4F4F5',
+    borderRadius: 22,
+    height: 44,
+    justifyContent: 'center',
+    width: 44,
+  },
+  stopButtonText: { color: '#111111', fontSize: 18, fontWeight: '900', lineHeight: 22 },
+  attachmentStrip: { flexDirection: 'row', flexWrap: 'wrap', marginBottom: 8, maxWidth: 900, width: '100%' },
+  attachmentItem: {
+    backgroundColor: '#151515',
+    borderColor: '#2A2A2A',
+    borderRadius: 12,
+    borderWidth: 1,
+    marginRight: 8,
+    marginTop: 8,
+    maxWidth: 180,
+    overflow: 'hidden',
+  },
+  attachmentImage: { height: 72, width: 72 },
+  attachmentFile: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 10, paddingVertical: 8 },
+  attachmentFileIcon: { color: '#A1A1AA', fontSize: 13, fontWeight: '800', marginRight: 6 },
+  attachmentName: { color: '#D4D4D8', flexShrink: 1, fontSize: 12, fontWeight: '700' },
+  removeAttachment: {
+    alignItems: 'center',
+    backgroundColor: '#F4F4F5',
+    borderRadius: 9,
+    height: 18,
+    justifyContent: 'center',
+    position: 'absolute',
+    right: 4,
+    top: 4,
+    width: 18,
+  },
+  removeAttachmentText: { color: '#111111', fontSize: 12, fontWeight: '800', lineHeight: 14 },
+  errorText: { color: '#FCA5A5', fontSize: 12, marginBottom: 6, maxWidth: 900, width: '100%' },
+});

package/src/connectorBrandIcons.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { SvgXml } from 'react-native-svg';
+
+const CONNECTOR_BRAND_ICON_XML: Record<string, string> = {
+  salesforce: `
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0.5 -149.38 999 999">
+  <path fill="#00A1E0" d="M416.224 76.763c32.219-33.57 77.074-54.391 126.682-54.391 65.946 0 123.48 36.772 154.12 91.361 26.626-11.896 56.098-18.514 87.106-18.514 118.94 0 215.368 97.268 215.368 217.247 0 119.993-96.428 217.261-215.368 217.261a213.735 213.735 0 0 1-42.422-4.227c-26.981 48.128-78.397 80.646-137.412 80.646-24.705 0-48.072-5.706-68.877-15.853-27.352 64.337-91.077 109.448-165.348 109.448-77.344 0-143.261-48.939-168.563-117.574-11.057 2.348-22.513 3.572-34.268 3.572C75.155 585.74.5 510.317.5 417.262c0-62.359 33.542-116.807 83.378-145.937-10.26-23.608-15.967-49.665-15.967-77.06C67.911 87.25 154.79.5 261.948.5c62.914 0 118.827 29.913 154.276 76.263"/>
+</svg>`,
+  gmail: `
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="2 6 44 36">
+  <path fill="#4caf50" d="M45,16.2l-5,2.75l-5,4.75L35,40h7c1.657,0,3-1.343,3-3V16.2z"/>
+  <path fill="#1e88e5" d="M3,16.2l3.614,1.71L13,23.7V40H6c-1.657,0-3-1.343-3-3V16.2z"/>
+  <polygon fill="#e53935" points="35,11.2 24,19.45 13,11.2 12,17 13,23.7 24,31.95 35,23.7 36,17"/>
+  <path fill="#c62828" d="M3,12.298V16.2l10,7.5V11.2L9.876,8.859C9.132,8.301,8.228,8,7.298,8C4.924,8,3,9.924,3,12.298z"/>
+  <path fill="#fbc02d" d="M45,12.298V16.2l-10,7.5V11.2l3.124-2.341C38.868,8.301,39.772,8,40.702,8C43.076,8,45,9.924,45,12.298z"/>
+</svg>`,
+  googlecalendar: `
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
+  <path fill="#fff" d="M195.368 60.632H60.632v134.736h134.736z"/>
+  <path fill="#ea4335" d="M195.368 256L256 195.368l-30.316-5.172l-30.316 5.172l-5.533 27.73z"/>
+  <path fill="#188038" d="M0 195.368v40.421C0 246.956 9.044 256 20.21 256h40.422l6.225-30.316l-6.225-30.316l-33.033-5.172z"/>
+  <path fill="#1967d2" d="M256 60.632V20.21C256 9.044 246.956 0 235.79 0h-40.422q-5.532 22.554-5.533 33.196q0 10.641 5.533 27.436q20.115 5.76 30.316 5.76T256 60.631"/>
+  <path fill="#fbbc04" d="M256 60.632h-60.632v134.736H256z"/>
+  <path fill="#34a853" d="M195.368 195.368H60.632V256h134.736z"/>
+  <path fill="#4285f4" d="M195.368 0H20.211C9.044 0 0 9.044 0 20.21v175.158h60.632V60.632h134.736z"/>
+  <path fill="#4285f4" d="M88.27 165.154c-5.036-3.402-8.523-8.37-10.426-14.94l11.689-4.816q1.59 6.063 5.558 9.398c2.627 2.223 5.827 3.318 9.566 3.318q5.734 0 9.852-3.487c2.746-2.324 4.127-5.288 4.127-8.875q0-5.508-4.345-8.994c-2.897-2.324-6.535-3.486-10.88-3.486h-6.754v-11.57h6.063q5.608 0 9.448-3.033c2.56-2.02 3.84-4.783 3.84-8.303c0-3.132-1.145-5.625-3.435-7.494c-2.29-1.87-5.188-2.813-8.708-2.813c-3.436 0-6.164.91-8.185 2.745a16.1 16.1 0 0 0-4.413 6.754l-11.57-4.817c1.532-4.345 4.345-8.185 8.471-11.503s9.398-4.985 15.798-4.985c4.733 0 8.994.91 12.767 2.745c3.772 1.836 6.736 4.379 8.875 7.613c2.14 3.25 3.2 6.888 3.2 10.93c0 4.126-.993 7.613-2.98 10.476s-4.43 5.052-7.327 6.585v.69a22.25 22.25 0 0 1 9.398 7.327c2.442 3.284 3.672 7.208 3.672 11.79c0 4.58-1.163 8.673-3.487 12.26c-2.324 3.588-5.54 6.417-9.617 8.472c-4.092 2.055-8.69 3.1-13.793 3.1c-5.912.016-11.369-1.685-16.405-5.087m71.797-58.005l-12.833 9.28l-6.417-9.734l23.023-16.607h8.825v78.333h-12.598z"/>
+</svg>`,
+  googledrive: `
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 112 100">
+  <path d="M8.46154 85.7051L13.3974 94.2308C14.4231 96.0256 15.8974 97.4359 17.6282 98.4615L35.2564 67.9487H0C0 69.9359 0.512821 71.9231 1.53846 73.7179L8.46154 85.7051Z" fill="#0066DA"/>
+  <path d="M55.9615 32.0513L38.3333 1.53846C36.6026 2.5641 35.1282 3.97436 34.1026 5.76923L1.53846 62.1795C0.531683 63.9357 0.00134047 65.9244 0 67.9487H35.2564L55.9615 32.0513Z" fill="#00AC47"/>
+  <path d="M94.2949 98.4615C96.0256 97.4359 97.5 96.0256 98.5256 94.2308L100.577 90.7051L110.385 73.7179C111.41 71.9231 111.923 69.9359 111.923 67.9487H76.6641L84.1667 82.6923L94.2949 98.4615Z" fill="#EA4335"/>
+  <path d="M55.9615 32.0513L73.5898 1.53846C71.859 0.512821 69.8718 0 67.8205 0H44.1026C42.0513 0 40.0641 0.576923 38.3333 1.53846L55.9615 32.0513Z" fill="#00832D"/>
+  <path d="M76.6667 67.9487H35.2564L17.6282 98.4615C19.359 99.4872 21.3462 100 23.3974 100H88.5256C90.5769 100 92.5641 99.4231 94.2949 98.4615L76.6667 67.9487Z" fill="#2684FC"/>
+  <path d="M94.1026 33.9744L77.8205 5.76923C76.7949 3.97436 75.3205 2.5641 73.5897 1.53846L55.9615 32.0513L76.6667 67.9487H111.859C111.859 65.9615 111.346 63.9744 110.321 62.1795L94.1026 33.9744Z" fill="#FFBA00"/>
+</svg>`,
+  notion: `
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
+  <path fill="#fff" d="M16.092 11.538L164.09.608c18.179-1.56 22.85-.508 34.28 7.801l47.243 33.282C253.406 47.414 256 48.975 256 55.207v182.527c0 11.439-4.155 18.205-18.696 19.24L65.44 267.378c-10.913.517-16.11-1.043-21.825-8.327L8.826 213.814C2.586 205.487 0 199.254 0 191.97V29.726c0-9.352 4.155-17.153 16.092-18.188"/>
+  <path fill="#111" d="M164.09.608L16.092 11.538C4.155 12.573 0 20.374 0 29.726v162.245c0 7.284 2.585 13.516 8.826 21.843l34.789 45.237c5.715 7.284 10.912 8.844 21.825 8.327l171.864-10.404c14.532-1.035 18.696-7.801 18.696-19.24V55.207c0-5.911-2.336-7.614-9.21-12.66l-1.185-.856L198.37 8.409C186.94.1 182.27-.952 164.09.608M69.327 52.22c-14.033.945-17.216 1.159-25.186-5.323L23.876 30.778c-2.06-2.086-1.026-4.69 4.163-5.207l142.274-10.395c11.947-1.043 18.17 3.12 22.842 6.758l24.401 17.68c1.043.525 3.638 3.637.517 3.637L71.146 52.095zm-16.36 183.954V81.222c0-6.767 2.077-9.887 8.3-10.413L230.02 60.93c5.724-.517 8.31 3.12 8.31 9.879v153.917c0 6.767-1.044 12.49-10.387 13.008l-161.487 9.361c-9.343.517-13.489-2.594-13.489-10.921M212.377 89.53c1.034 4.681 0 9.362-4.681 9.897l-7.783 1.542v114.404c-6.758 3.637-12.981 5.715-18.18 5.715c-8.308 0-10.386-2.604-16.609-10.396l-50.898-80.079v77.476l16.1 3.646s0 9.362-12.989 9.362l-35.814 2.077c-1.043-2.086 0-7.284 3.63-8.318l9.351-2.595V109.823l-12.98-1.052c-1.044-4.68 1.55-11.439 8.826-11.965l38.426-2.585l52.958 81.113v-71.76l-13.498-1.552c-1.043-5.733 3.111-9.896 8.3-10.404z"/>
+</svg>`,
+  slack: `
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
+  <path fill="#de1c59" d="M27.255 80.719c0 7.33-5.978 13.317-13.309 13.317S.63 88.049.63 80.719s5.987-13.317 13.317-13.317h13.309zm6.709 0c0-7.33 5.987-13.317 13.317-13.317s13.317 5.986 13.317 13.317v33.335c0 7.33-5.986 13.317-13.317 13.317c-7.33 0-13.317-5.987-13.317-13.317zm0 0"/>
+  <path fill="#35c5f0" d="M47.281 27.255c-7.33 0-13.317-5.978-13.317-13.309S39.951.63 47.281.63s13.317 5.987 13.317 13.317v13.309zm0 6.709c7.33 0 13.317 5.987 13.317 13.317s-5.986 13.317-13.317 13.317H13.946C6.616 60.598.63 54.612.63 47.281c0-7.33 5.987-13.317 13.317-13.317zm0 0"/>
+  <path fill="#2eb57d" d="M100.745 47.281c0-7.33 5.978-13.317 13.309-13.317s13.317 5.987 13.317 13.317s-5.987 13.317-13.317 13.317h-13.309zm-6.709 0c0 7.33-5.987 13.317-13.317 13.317s-13.317-5.986-13.317-13.317V13.946C67.402 6.616 73.388.63 80.719.63c7.33 0 13.317 5.987 13.317 13.317zm0 0"/>
+  <path fill="#ebb02e" d="M80.719 100.745c7.33 0 13.317 5.978 13.317 13.309s-5.987 13.317-13.317 13.317s-13.317-5.987-13.317-13.317v-13.309zm0-6.709c-7.33 0-13.317-5.987-13.317-13.317s5.986-13.317 13.317-13.317h33.335c7.33 0 13.317 5.986 13.317 13.317c0 7.33-5.987 13.317-13.317 13.317zm0 0"/>
+</svg>`,
+  slackbot: `
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
+  <path fill="#de1c59" d="M27.255 80.719c0 7.33-5.978 13.317-13.309 13.317S.63 88.049.63 80.719s5.987-13.317 13.317-13.317h13.309zm6.709 0c0-7.33 5.987-13.317 13.317-13.317s13.317 5.986 13.317 13.317v33.335c0 7.33-5.986 13.317-13.317 13.317c-7.33 0-13.317-5.987-13.317-13.317zm0 0"/>
+  <path fill="#35c5f0" d="M47.281 27.255c-7.33 0-13.317-5.978-13.317-13.309S39.951.63 47.281.63s13.317 5.987 13.317 13.317v13.309zm0 6.709c7.33 0 13.317 5.987 13.317 13.317s-5.986 13.317-13.317 13.317H13.946C6.616 60.598.63 54.612.63 47.281c0-7.33 5.987-13.317 13.317-13.317zm0 0"/>
+  <path fill="#2eb57d" d="M100.745 47.281c0-7.33 5.978-13.317 13.309-13.317s13.317 5.987 13.317 13.317s-5.987 13.317-13.317 13.317h-13.309zm-6.709 0c0 7.33-5.987 13.317-13.317 13.317s-13.317-5.986-13.317-13.317V13.946C67.402 6.616 73.388.63 80.719.63c7.33 0 13.317 5.987 13.317 13.317zm0 0"/>
+  <path fill="#ebb02e" d="M80.719 100.745c7.33 0 13.317 5.978 13.317 13.309s-5.987 13.317-13.317 13.317s-13.317-5.987-13.317-13.317v-13.309zm0-6.709c-7.33 0-13.317-5.987-13.317-13.317s5.986-13.317 13.317-13.317h33.335c7.33 0 13.317 5.986 13.317 13.317c0 7.33-5.987 13.317-13.317 13.317zm0 0"/>
+</svg>`,
+};
+
+export function hasConnectorBrandIcon(connectorId: string) {
+  return !!CONNECTOR_BRAND_ICON_XML[connectorId];
+}
+
+export function ConnectorBrandIcon({ connectorId, size }: { connectorId: string; size: number }) {
+  const xml = CONNECTOR_BRAND_ICON_XML[connectorId];
+  if (!xml) {
+    return null;
+  }
+
+  return <SvgXml height={size} width={size} xml={xml} />;
+}