opendesk-react-native 0.0.0-stage → 0.1.2

package/src/ui/OpenDeskLauncher.tsx

@@ -0,0 +1,69 @@
+import { useMemo } from 'react';
+import { Pressable, StyleSheet, Text, useColorScheme, View, type StyleProp, type ViewStyle } from 'react-native';
+import { useOpenDeskState, useUnreadCount } from '../react';
+import { ChatIcon, CloseIcon } from './icons';
+import { makeTheme } from './theme';
+
+export interface OpenDeskLauncherProps {
+  onPress: () => void;
+  /** Shows the close icon instead of the chat bubble. */
+  open?: boolean;
+  accentColor?: string;
+  accessibilityLabel?: string;
+  /** Position it yourself, e.g. `{ position: 'absolute', right: 20, bottom: 20 }`. */
+  style?: StyleProp<ViewStyle>;
+}
+
+/** The web widget's launcher button: brand colour, rounded square, unread badge. */
+export function OpenDeskLauncher({ onPress, open = false, accentColor, accessibilityLabel, style }: OpenDeskLauncherProps) {
+  const config = useOpenDeskState((state) => state.config);
+  const unread = useUnreadCount();
+  const scheme = useColorScheme() === 'dark' ? 'dark' : 'light';
+  const theme = useMemo(() => makeTheme(config, config?.theme === 'light' || config?.theme === 'dark' ? config.theme : scheme, accentColor), [accentColor, config, scheme]);
+  const radius = { square: 10, soft: 16, round: 27 }[config?.radius ?? 'soft'] ?? 16;
+  const label = accessibilityLabel ?? (open ? 'Close chat' : unread > 0 ? `Open chat, ${unread} new` : 'Open chat');
+
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={label}
+      onPress={onPress}
+      style={({ pressed }) => [styles.launcher, { backgroundColor: theme.accent, borderRadius: radius }, pressed && styles.pressed, style]}
+    >
+      {open ? <CloseIcon color={theme.accentFg} size={22} /> : <ChatIcon color={theme.accentFg} size={24} />}
+      {!open && unread > 0 ? (
+        <View style={[styles.badge, { backgroundColor: theme.danger, borderColor: theme.bg }]}>
+          <Text style={styles.badgeText}>{unread > 99 ? '99+' : unread}</Text>
+        </View>
+      ) : null}
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  launcher: {
+    width: 54,
+    height: 54,
+    alignItems: 'center',
+    justifyContent: 'center',
+    shadowColor: '#000000',
+    shadowOpacity: 0.3,
+    shadowRadius: 10,
+    shadowOffset: { width: 0, height: 8 },
+    elevation: 6,
+  },
+  pressed: { transform: [{ scale: 0.96 }] },
+  badge: {
+    position: 'absolute',
+    top: -5,
+    right: -5,
+    minWidth: 20,
+    height: 20,
+    paddingHorizontal: 6,
+    borderRadius: 10,
+    borderWidth: 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  badgeText: { color: '#ffffff', fontSize: 11, fontWeight: '600' },
+});

package/src/ui/icons.tsx

@@ -0,0 +1,162 @@
+import { View, type ViewStyle } from 'react-native';
+
+/**
+ * The widget's line icons drawn with plain Views, so the SDK needs no react-native-svg.
+ * Each fits a square of `size` with 1.6px strokes, like the web widget's 1.6 stroke SVGs.
+ */
+interface IconProps {
+  color: string;
+  size?: number;
+}
+
+const stroke = 1.6;
+
+function Box({ size, children }: { size: number; children: React.ReactNode }) {
+  return <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>{children}</View>;
+}
+
+function Line({ length, color, style }: { length: number; color: string; style?: ViewStyle }) {
+  return (
+    <View
+      style={[{ position: 'absolute', width: length, height: stroke, borderRadius: stroke, backgroundColor: color }, style]}
+    />
+  );
+}
+
+export function CloseIcon({ color, size = 16 }: IconProps) {
+  const length = size * 0.78;
+
+  return (
+    <Box size={size}>
+      <Line length={length} color={color} style={{ transform: [{ rotate: '45deg' }] }} />
+      <Line length={length} color={color} style={{ transform: [{ rotate: '-45deg' }] }} />
+    </Box>
+  );
+}
+
+/** A chevron; `direction` is where it points. */
+export function ChevronIcon({ color, size = 16, direction = 'left' }: IconProps & { direction?: 'left' | 'right' }) {
+  const arm = size * 0.42;
+
+  return (
+    <Box size={size}>
+      <View
+        style={{
+          width: arm,
+          height: arm,
+          borderLeftWidth: stroke,
+          borderBottomWidth: stroke,
+          borderColor: color,
+          borderBottomLeftRadius: 1,
+          transform: [{ translateX: direction === 'left' ? arm * 0.2 : -arm * 0.2 }, { rotate: direction === 'left' ? '45deg' : '-135deg' }],
+        }}
+      />
+    </Box>
+  );
+}
+
+/** An arrow; `angle` is the clockwise rotation from pointing right. */
+export function ArrowIcon({ color, size = 16, angle = 0 }: IconProps & { angle?: number }) {
+  const shaft = size * 0.7;
+  const head = size * 0.36;
+
+  return (
+    <Box size={size}>
+      <View style={{ width: shaft, height: shaft, alignItems: 'center', justifyContent: 'center', transform: [{ rotate: `${angle}deg` }] }}>
+        <Line length={shaft} color={color} />
+        <View
+          style={{
+            position: 'absolute',
+            right: stroke / 2,
+            width: head,
+            height: head,
+            borderTopWidth: stroke,
+            borderRightWidth: stroke,
+            borderColor: color,
+            borderTopRightRadius: 1,
+            transform: [{ rotate: '45deg' }],
+          }}
+        />
+      </View>
+    </Box>
+  );
+}
+
+export function PaperclipIcon({ color, size = 16 }: IconProps) {
+  const width = size * 0.42;
+  const height = size * 0.86;
+
+  return (
+    <Box size={size}>
+      <View style={{ transform: [{ rotate: '40deg' }] }}>
+        <View
+          style={{ width, height, borderWidth: stroke, borderColor: color, borderRadius: width / 2, borderBottomColor: color }}
+        />
+        <View
+          style={{
+            position: 'absolute',
+            left: width / 2 - stroke / 2,
+            top: height * 0.22,
+            width: stroke,
+            height: height * 0.5,
+            borderRadius: stroke,
+            backgroundColor: color,
+          }}
+        />
+      </View>
+    </Box>
+  );
+}
+
+/** A speech bubble, used on the launcher. */
+export function ChatIcon({ color, size = 22 }: IconProps) {
+  const width = size * 0.86;
+  const height = size * 0.66;
+
+  return (
+    <Box size={size}>
+      <View style={{ width, height, borderWidth: 2, borderColor: color, borderRadius: height * 0.38 }} />
+      <View
+        style={{
+          position: 'absolute',
+          left: size * 0.2,
+          bottom: size * 0.06,
+          width: size * 0.22,
+          height: size * 0.22,
+          borderLeftWidth: 2,
+          borderBottomWidth: 2,
+          borderColor: color,
+          borderBottomLeftRadius: 2,
+          transform: [{ skewY: '-20deg' }],
+        }}
+      />
+    </Box>
+  );
+}
+
+export function PersonIcon({ color, size = 16 }: IconProps) {
+  return (
+    <Box size={size}>
+      <View style={{ width: size * 0.38, height: size * 0.38, borderRadius: size, borderWidth: stroke, borderColor: color, marginBottom: 1 }} />
+      <View
+        style={{
+          width: size * 0.66,
+          height: size * 0.3,
+          borderTopLeftRadius: size,
+          borderTopRightRadius: size,
+          borderWidth: stroke,
+          borderBottomWidth: 0,
+          borderColor: color,
+        }}
+      />
+    </Box>
+  );
+}
+
+export function SparkIcon({ color, size = 10 }: IconProps) {
+  return (
+    <Box size={size}>
+      <View style={{ width: size * 0.5, height: size * 0.5, backgroundColor: color, borderRadius: 1, transform: [{ rotate: '45deg' }] }} />
+    </Box>
+  );
+}

package/src/ui/strings.ts

@@ -0,0 +1,57 @@
+/** The web widget's English copy, so both channels read the same. Override any key via `strings`. */
+export const defaultStrings = {
+  support: 'Support',
+  closeChat: 'Close chat',
+  greeting: 'Hi there. How can we help?',
+  replyTime: 'We usually reply within a few hours.',
+  replyTimeAi: '{name} answers right away, the team within a few hours.',
+  unavailable: 'Chat is unavailable',
+  unavailableHint: 'Check your connection and try again later.',
+  sendMessage: 'Send us a message',
+  yourConversations: 'Your conversations',
+  conversation: 'Conversation',
+  typing: '{name} is typing…',
+  botTyping: '{name} is writing…',
+  searchHelp: 'Search the help center',
+  poweredBy: 'Powered by opendesk',
+  back: 'Back to conversations',
+  emptyHint: "Ask us anything. We'll reply here, and by email if you leave one.",
+  notSent: 'Not sent.',
+  sending: 'Sending…',
+  uploading: 'Uploading…',
+  removeFile: 'Remove {name}',
+  fileTypeRefused: "{name} can't be sent here. Try another file type.",
+  fileTooLarge: '{name} is larger than 25 MB.',
+  uploadFailed: "Couldn't upload {name}. Try again.",
+  placeholder: 'Write a message…',
+  attach: 'Attach files',
+  send: 'Send',
+  ai: 'AI',
+  talkToPerson: 'Talk to a person',
+  handoffFailed: "Couldn't reach the team. Try again.",
+  handedOff: 'A person will reply here',
+  handedOffHint: "You'll see their reply in this conversation, and by email if you left one.",
+  checking: 'Checking {tool}…',
+  checked: 'Checked {tool}',
+  toolFailed: "Couldn't check {tool}",
+  actionPending: 'Needs your confirmation',
+  confirm: 'Confirm',
+  cancel: 'Cancel',
+  actionConfirmed: 'Confirmed',
+  actionDeclined: 'Cancelled',
+  actionExpired: 'Expired',
+  actionFailed: "Didn't go through",
+  topicsTitle: 'What can we help with?',
+  topicsHint: 'Pick a topic so your message reaches the right people.',
+  placeholderTopic: 'Pick a topic to start',
+  changeTopic: 'Change topic',
+  offlineDefault: "We're away right now. Leave a message and we'll reply as soon as we're back.",
+  today: 'Today',
+  yesterday: 'Yesterday',
+};
+
+export type ChatStrings = typeof defaultStrings;
+
+export function format(template: string, values: Record<string, string | number> = {}): string {
+  return template.replace(/\{(\w+)\}/g, (match, key: string) => (key in values ? String(values[key]) : match));
+}

package/src/ui/theme.ts

@@ -0,0 +1,127 @@
+import { Platform } from 'react-native';
+import type { WidgetConfig } from '../types';
+
+/** Colour tokens from openDesk's web widget (`.root` and `.root[data-theme="dark"]`). */
+export interface Palette {
+  bg: string;
+  bg2: string;
+  bg3: string;
+  line: string;
+  line2: string;
+  fg: string;
+  fg2: string;
+  fg3: string;
+  fg4: string;
+  ai: string;
+  aiSoft: string;
+  aiLine: string;
+  danger: string;
+  dangerSoft: string;
+}
+
+const light: Palette = {
+  bg: '#ffffff',
+  bg2: '#f4f4f5',
+  bg3: '#fafafa',
+  line: '#e7e7e9',
+  line2: '#d6d6d9',
+  fg: '#0a0a0a',
+  fg2: '#525252',
+  fg3: '#737373',
+  fg4: '#a3a3a3',
+  ai: '#6d4bd8',
+  aiSoft: '#f4f0ff',
+  aiLine: '#e4dcff',
+  danger: '#dc2626',
+  dangerSoft: '#fef2f2',
+};
+
+const dark: Palette = {
+  bg: '#161616',
+  bg2: '#242426',
+  bg3: '#1c1c1d',
+  line: '#2c2c2f',
+  line2: '#3a3a3e',
+  fg: '#fafafa',
+  fg2: '#c4c4c6',
+  fg3: '#8d8d92',
+  fg4: '#5e5e63',
+  ai: '#b9a3ff',
+  aiSoft: '#231d33',
+  aiLine: '#372d52',
+  danger: '#f87171',
+  dangerSoft: '#2a1515',
+};
+
+/** The widget's `radius` setting, in the same steps as the web widget. */
+const radii = {
+  square: { bubble: 6, ctl: 4, card: 4, bar: 4, av: 4 },
+  soft: { bubble: 14, ctl: 8, card: 10, bar: 10, av: 6 },
+  round: { bubble: 20, ctl: 999, card: 16, bar: 22, av: 999 },
+} as const;
+
+export interface ChatTheme extends Palette {
+  accent: string;
+  accentFg: string;
+  headBg: string;
+  radius: (typeof radii)[keyof typeof radii];
+  mono: string;
+}
+
+export function makeTheme(config: WidgetConfig | null, scheme: 'light' | 'dark', accentOverride?: string): ChatTheme {
+  const palette = scheme === 'dark' ? dark : light;
+  const brand = normalizeHex(accentOverride ?? config?.brand_color ?? config?.brand?.color);
+  const accent = brand ?? palette.fg;
+
+  return {
+    ...palette,
+    accent,
+    accentFg: brand ? readableOn(brand) : palette.bg,
+    headBg: mix(accent, palette.bg3, 0.035),
+    radius: radii[config?.radius ?? 'soft'] ?? radii.soft,
+    mono: Platform.select({ ios: 'Menlo', android: 'monospace', default: 'ui-monospace, SFMono-Regular, Menlo, monospace' }),
+  };
+}
+
+function normalizeHex(value: string | undefined | null): string | null {
+  if (!value) {
+    return null;
+  }
+  const hex = value.trim().replace(/^#/, '');
+
+  return /^([0-9a-f]{3}|[0-9a-f]{6})$/i.test(hex) ? `#${hex}` : null;
+}
+
+function rgb(hex: string): [number, number, number] {
+  let h = hex.replace('#', '');
+  if (h.length === 3) {
+    h = h
+      .split('')
+      .map((c) => c + c)
+      .join('');
+  }
+  const n = parseInt(h, 16);
+
+  return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+}
+
+/** `color-mix(in srgb, a weight, b)`. */
+function mix(a: string, b: string, weight: number): string {
+  const [ar, ag, ab] = rgb(a);
+  const [br, bg, bb] = rgb(b);
+  const channel = (x: number, y: number) => Math.round(x * weight + y * (1 - weight)).toString(16).padStart(2, '0');
+
+  return `#${channel(ar, br)}${channel(ag, bg)}${channel(ab, bb)}`;
+}
+
+/** White or near-black text, whichever reads better on the brand colour. */
+function readableOn(hex: string): string {
+  const [r, g, b] = rgb(hex).map((c) => {
+    const v = c / 255;
+
+    return v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;
+  }) as [number, number, number];
+  const luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+
+  return luminance > 0.45 ? '#0a0a0a' : '#ffffff';
+}