turbodesk-livechat-react-native 0.1.0-alpha.0

package/src/ui/components/MessageComposer.tsx

@@ -0,0 +1,461 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import {
+  ActivityIndicator,
+  Alert,
+  Image,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import { useLiveChatContext } from "../../provider/LiveChatContext";
+import { fileApi } from "../../api/file-api";
+import { SendPlaneIcon, PaperclipIcon, CloseIcon } from "../icons";
+
+// ── types ─────────────────────────────────────────────────────────────────────
+
+export type PickedAttachmentKind = "image" | "video" | "audio" | "document";
+
+export type PickedAttachment = {
+  uri: string;
+  name: string;
+  type: string; // mime type
+  size?: number;
+  kind: PickedAttachmentKind;
+};
+
+export type UploadedAttachment = {
+  id: string;
+  fileId: string;
+  fileUrl: string;
+  fileName: string;
+  fileExtension: string;
+  fileType: string;
+  type: PickedAttachmentKind;
+};
+
+export type PendingAttachment = {
+  id: string;
+  uri: string;
+  name: string;
+  mimeType: string;
+  kind: PickedAttachmentKind;
+};
+
+export type MessageComposerProps = {
+  onSend: (text: string, uploadedAttachments?: UploadedAttachment[]) => void | Promise<void>;
+  disabled?: boolean;
+  placeholder?: string;
+};
+
+const MAX_ATTACHMENTS = 5;
+
+function newId() {
+  return typeof crypto !== "undefined" && crypto.randomUUID
+    ? crypto.randomUUID()
+    : `a-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+}
+
+// ── attachment picker ─────────────────────────────────────────────────────────
+
+type AttachmentMenuProps = {
+  onPick: (attachment: PickedAttachment) => void;
+  disabled?: boolean;
+  attachmentCount: number;
+  color: string;
+};
+
+function AttachmentMenu({ onPick, disabled, attachmentCount, color }: AttachmentMenuProps) {
+  const { theme: t } = useLiveChatContext();
+  const [open, setOpen] = useState(false);
+  const atLimit = attachmentCount >= MAX_ATTACHMENTS;
+  const triggerDisabled = disabled || atLimit;
+
+  const handleKind = useCallback(async (kind: PickedAttachmentKind) => {
+    setOpen(false);
+    if (triggerDisabled) return;
+
+    try {
+      let picked: PickedAttachment | null = null;
+
+      if (kind === "image") {
+        // Try react-native-image-picker
+        const ImagePicker = require("react-native-image-picker");
+        await new Promise<void>((resolve) => {
+          ImagePicker.launchImageLibrary({ mediaType: "photo", quality: 0.8 }, (res: any) => {
+            if (res.didCancel || res.errorCode) { resolve(); return; }
+            const asset = res.assets?.[0];
+            if (!asset) { resolve(); return; }
+            picked = {
+              uri: asset.uri,
+              name: asset.fileName ?? "image.jpg",
+              type: asset.type ?? "image/jpeg",
+              size: asset.fileSize,
+              kind: "image",
+            };
+            resolve();
+          });
+        });
+      } else if (kind === "video") {
+        const ImagePicker = require("react-native-image-picker");
+        await new Promise<void>((resolve) => {
+          ImagePicker.launchImageLibrary({ mediaType: "video" }, (res: any) => {
+            if (res.didCancel || res.errorCode) { resolve(); return; }
+            const asset = res.assets?.[0];
+            if (!asset) { resolve(); return; }
+            picked = {
+              uri: asset.uri,
+              name: asset.fileName ?? "video.mp4",
+              type: asset.type ?? "video/mp4",
+              size: asset.fileSize,
+              kind: "video",
+            };
+            resolve();
+          });
+        });
+      } else {
+        // audio / document — use react-native-document-picker
+        const DocumentPicker = require("react-native-document-picker");
+        const types = kind === "audio"
+          ? [DocumentPicker.types.audio]
+          : [DocumentPicker.types.pdf, DocumentPicker.types.plainText, DocumentPicker.types.doc, DocumentPicker.types.docx];
+        const res = await DocumentPicker.pick({ type: types });
+        const file = Array.isArray(res) ? res[0] : res;
+        if (file) {
+          picked = {
+            uri: file.uri,
+            name: file.name ?? "file",
+            type: file.type ?? "application/octet-stream",
+            size: file.size,
+            kind,
+          };
+        }
+      }
+
+      if (picked) onPick(picked);
+    } catch (e: any) {
+      if (e?.code !== "DOCUMENT_PICKER_CANCELED") {
+        Alert.alert("Error", "Could not pick file.");
+      }
+    }
+  }, [triggerDisabled, onPick]);
+
+  return (
+    <View style={styles.attachMenuRoot}>
+      <TouchableOpacity
+        onPress={() => !triggerDisabled && setOpen((o) => !o)}
+        disabled={triggerDisabled}
+        style={[styles.iconBtn, triggerDisabled && styles.disabled]}
+        accessibilityLabel="Attach file"
+      >
+        <PaperclipIcon size={20} color={color} />
+      </TouchableOpacity>
+
+      {open ? (
+        <View style={[styles.attachPopover, { backgroundColor: t.colors.surface, borderColor: t.colors.border }]}>
+          {(["image", "video", "audio", "document"] as PickedAttachmentKind[]).map((kind) => (
+            <TouchableOpacity
+              key={kind}
+              onPress={() => void handleKind(kind)}
+              style={styles.attachMenuItem}
+            >
+              <Text style={[styles.attachMenuLabel, { color: t.colors.text }]}>
+                {kind.charAt(0).toUpperCase() + kind.slice(1)}
+              </Text>
+            </TouchableOpacity>
+          ))}
+          <TouchableOpacity onPress={() => setOpen(false)} style={[styles.attachMenuClose, { borderTopColor: t.colors.border }]}>
+            <CloseIcon size={14} color={t.colors.textMuted} />
+          </TouchableOpacity>
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+// ── file previews ─────────────────────────────────────────────────────────────
+
+function FilePreviews({
+  items,
+  onRemove,
+  borderColor,
+}: {
+  items: PendingAttachment[];
+  onRemove: (id: string) => void;
+  borderColor: string;
+}) {
+  const { theme: t } = useLiveChatContext();
+  if (!items.length) return null;
+  return (
+    <ScrollView
+      horizontal
+      showsHorizontalScrollIndicator={false}
+      style={styles.previewScroll}
+      contentContainerStyle={styles.previewContent}
+    >
+      {items.map((item) => {
+        const isImage = item.kind === "image";
+        return (
+          <View key={item.id} style={styles.previewItem}>
+            <View style={[styles.previewThumb, { borderColor }]}>
+              {isImage ? (
+                <Image source={{ uri: item.uri }} style={styles.previewImage} resizeMode="cover" />
+              ) : (
+                <View style={[styles.previewFileIcon, { backgroundColor: t.colors.bubbleIn }]}>
+                  <Text style={styles.previewFileIconText}>📄</Text>
+                </View>
+              )}
+            </View>
+            <TouchableOpacity
+              onPress={() => onRemove(item.id)}
+              style={[styles.previewRemoveBtn, { backgroundColor: t.colors.surface, borderColor: t.colors.border }]}
+              accessibilityLabel={`Remove ${item.name}`}
+            >
+              <CloseIcon size={10} color={borderColor} />
+            </TouchableOpacity>
+          </View>
+        );
+      })}
+    </ScrollView>
+  );
+}
+
+// ── upload helper ─────────────────────────────────────────────────────────────
+
+async function uploadAttachment(
+  pending: PendingAttachment,
+  visitorQueryParams: Record<string, string> | null
+): Promise<UploadedAttachment | null> {
+  try {
+    const ext = pending.name.split(".").pop() ?? "";
+    const presigned = await fileApi.getFileUrl(
+      {
+        operation: "putObject",
+        name: pending.name,
+        type: pending.mimeType,
+        extension: ext,
+        fileMode: "app",
+      },
+      visitorQueryParams ? { params: visitorQueryParams } : undefined
+    ) as any;
+
+    await fetch(presigned?.data?.signedUrl, {
+      method: "PUT",
+      headers: { "Content-Type": pending.mimeType },
+      body: { uri: pending.uri, type: pending.mimeType, name: pending.name } as any,
+    });
+
+    const uploaded = presigned?.data?.file;
+    return {
+      id: pending.id,
+      fileId: uploaded._id,
+      fileUrl: uploaded.url,
+      fileName: uploaded.name,
+      fileExtension: uploaded.extension,
+      fileType: pending.mimeType,
+      type: pending.kind,
+    };
+  } catch {
+    return null;
+  }
+}
+
+// ── main composer ─────────────────────────────────────────────────────────────
+
+export function MessageComposer({
+  onSend,
+  disabled = false,
+  placeholder = "Message…",
+}: MessageComposerProps) {
+  const { theme: t, visitorQueryParams } = useLiveChatContext();
+  const [text, setText] = useState("");
+  const [attachments, setAttachments] = useState<PendingAttachment[]>([]);
+  const [isSending, setIsSending] = useState(false);
+  const inputRef = useRef<TextInput>(null);
+
+  const trimmed = text.trim();
+  const canSend = (trimmed.length > 0 || attachments.length > 0) && !disabled && !isSending;
+
+  const handlePick = useCallback((item: PickedAttachment) => {
+    setAttachments((prev) => {
+      if (prev.length >= MAX_ATTACHMENTS) return prev;
+      return [...prev, { id: newId(), uri: item.uri, name: item.name, mimeType: item.type, kind: item.kind }];
+    });
+  }, []);
+
+  const handleRemove = useCallback((id: string) => {
+    setAttachments((prev) => prev.filter((a) => a.id !== id));
+  }, []);
+
+  const handleSend = useCallback(async () => {
+    if (!canSend) return;
+    setIsSending(true);
+    const snapshot = [...attachments];
+    const sendText = text.trim();
+    try {
+      const uploadResults = await Promise.all(
+        snapshot.map((a) => uploadAttachment(a, visitorQueryParams))
+      );
+      const uploaded = uploadResults.filter((r): r is UploadedAttachment => r !== null);
+      await onSend(sendText, uploaded);
+      setText("");
+      setAttachments([]);
+    } catch {
+      /* ignore */
+    } finally {
+      setIsSending(false);
+    }
+  }, [canSend, text, attachments, onSend, visitorQueryParams]);
+
+  return (
+    <View style={[styles.container, { backgroundColor: t.colors.composerBackground, borderTopColor: t.colors.composerBorder }]}>
+      <View style={[styles.inner, { borderColor: t.colors.composerBorder }]}>
+        <FilePreviews items={attachments} onRemove={handleRemove} borderColor={t.colors.border} />
+
+        <TextInput
+          ref={inputRef}
+          style={[styles.input, { color: t.colors.inputText, fontSize: t.fontSizes.md }]}
+          value={text}
+          onChangeText={setText}
+          placeholder={placeholder}
+          placeholderTextColor={t.colors.textMuted}
+          multiline
+          maxLength={4000}
+          editable={!disabled}
+          returnKeyType="default"
+          blurOnSubmit={false}
+        />
+
+        <View style={styles.toolbar}>
+          <AttachmentMenu
+            onPick={handlePick}
+            disabled={disabled || isSending}
+            attachmentCount={attachments.length}
+            color={t.colors.textMuted}
+          />
+
+          <TouchableOpacity
+            onPress={() => void handleSend()}
+            disabled={!canSend}
+            activeOpacity={0.75}
+            style={[
+              styles.sendBtn,
+              { backgroundColor: canSend ? t.colors.sendButtonBackground : t.colors.border },
+            ]}
+            accessibilityLabel="Send message"
+          >
+            {isSending ? (
+              <ActivityIndicator size="small" color={t.colors.sendButtonIcon} />
+            ) : (
+              <SendPlaneIcon size={18} color={canSend ? t.colors.sendButtonIcon : t.colors.textMuted} />
+            )}
+          </TouchableOpacity>
+        </View>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    borderTopWidth: 1,
+    paddingHorizontal: 8,
+    paddingTop: 8,
+    paddingBottom: 8,
+  },
+  inner: {
+    borderWidth: 1,
+    borderRadius: 12,
+    paddingHorizontal: 12,
+    paddingTop: 10,
+    paddingBottom: 6,
+  },
+  input: {
+    minHeight: 30,
+    maxHeight: 200,
+    paddingVertical: 4,
+    paddingHorizontal: 4,
+  },
+  toolbar: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginTop: 6,
+  },
+  iconBtn: {
+    width: 36,
+    height: 36,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: 18,
+  },
+  disabled: { opacity: 0.4 },
+  sendBtn: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  // attachment menu
+  attachMenuRoot: { position: "relative" },
+  attachPopover: {
+    position: "absolute",
+    bottom: 44,
+    left: 0,
+    borderRadius: 12,
+    borderWidth: 1,
+    paddingVertical: 4,
+    minWidth: 140,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.12,
+    shadowRadius: 8,
+    elevation: 6,
+    zIndex: 20,
+  },
+  attachMenuItem: {
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+  },
+  attachMenuLabel: {
+    fontSize: 14,
+  },
+  attachMenuClose: {
+    alignItems: "center",
+    paddingVertical: 8,
+    borderTopWidth: StyleSheet.hairlineWidth,
+  },
+  // previews
+  previewScroll: { marginBottom: 8 },
+  previewContent: { gap: 8, paddingBottom: 2 },
+  previewItem: { position: "relative" },
+  previewThumb: {
+    borderWidth: 1,
+    borderRadius: 8,
+    padding: 2,
+    overflow: "hidden",
+  },
+  previewImage: { width: 44, height: 44, borderRadius: 6 },
+  previewFileIcon: {
+    width: 44,
+    height: 44,
+    borderRadius: 6,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  previewFileIconText: { fontSize: 20 },
+  previewRemoveBtn: {
+    position: "absolute",
+    top: -4,
+    right: -4,
+    width: 18,
+    height: 18,
+    borderRadius: 9,
+    borderWidth: 1,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});

package/src/ui/components/WsStatusStrip.tsx

@@ -0,0 +1,123 @@
+import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { Animated, StyleSheet, Text, View } from "react-native";
+import { useLiveChatContext } from "../../provider/LiveChatContext";
+
+type ToastKind = "connecting" | "reconnecting" | "connected";
+
+export function WsStatusStrip() {
+  const { connectionState } = useLiveChatContext();
+  const { isConnected, isConnecting, isAwaitingRetry } = connectionState;
+
+  const everConnected = useRef(false);
+  const dismissTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const holdTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const [wsToast, setWsToast] = useState<ToastKind | null>(null);
+  const [wsStripHold, setWsStripHold] = useState<ToastKind | null>(null);
+
+  const heightAnim = useRef(new Animated.Value(0)).current;
+
+  // Track ever-connected
+  useEffect(() => {
+    if (isConnected) everConnected.current = true;
+  }, [isConnected]);
+
+  // Drive wsToast
+  useEffect(() => {
+    if (dismissTimer.current) clearTimeout(dismissTimer.current);
+
+    const wsRecoveryUi = !isConnected && (isConnecting || isAwaitingRetry);
+
+    if (wsRecoveryUi) {
+      setWsToast(everConnected.current ? "reconnecting" : "connecting");
+    } else if (isConnected && wsToast !== null) {
+      // just recovered
+      setWsToast("connected");
+      dismissTimer.current = setTimeout(() => setWsToast(null), 1200);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isConnected, isConnecting, isAwaitingRetry]);
+
+  // wsStripHold — keep rendered 300ms after toast clears for collapse animation
+  useLayoutEffect(() => {
+    if (holdTimer.current) clearTimeout(holdTimer.current);
+    if (wsToast) {
+      setWsStripHold(wsToast);
+    } else {
+      holdTimer.current = setTimeout(() => setWsStripHold(null), 300);
+    }
+    return () => {
+      if (holdTimer.current) clearTimeout(holdTimer.current);
+    };
+  }, [wsToast]);
+
+  // Height animation
+  useEffect(() => {
+    Animated.timing(heightAnim, {
+      toValue: wsToast ? 36 : 0,
+      duration: 300,
+      useNativeDriver: false,
+    }).start();
+  }, [wsToast, heightAnim]);
+
+  if (!wsStripHold) return null;
+
+  const isAmber = wsStripHold === "connecting" || wsStripHold === "reconnecting";
+  const bg = "#71717a";
+  const label =
+    wsStripHold === "connecting"
+      ? "Connecting…"
+      : wsStripHold === "reconnecting"
+      ? "Reconnecting…"
+      : "Connected";
+
+  return (
+    <Animated.View style={[styles.strip, { backgroundColor: bg, height: heightAnim, overflow: "hidden" }]}>
+      <View style={styles.row}>
+        {isAmber && <Spinner />}
+        <Text style={styles.text}>{label}</Text>
+      </View>
+    </Animated.View>
+  );
+}
+
+function Spinner() {
+  const spin = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.loop(
+      Animated.timing(spin, { toValue: 1, duration: 800, useNativeDriver: true })
+    ).start();
+  }, [spin]);
+
+  const rotate = spin.interpolate({ inputRange: [0, 1], outputRange: ["0deg", "360deg"] });
+
+  return (
+    <Animated.View style={[styles.spinner, { transform: [{ rotate }] }]} />
+  );
+}
+
+const styles = StyleSheet.create({
+  strip: {
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+  },
+  text: {
+    color: "#ffffff",
+    fontSize: 12,
+    fontWeight: "600",
+  },
+  spinner: {
+    width: 12,
+    height: 12,
+    borderRadius: 6,
+    borderWidth: 2,
+    borderColor: "rgba(255,255,255,0.4)",
+    borderTopColor: "#ffffff",
+  },
+});

package/src/ui/icons.tsx

@@ -0,0 +1,111 @@
+import React from "react";
+import Svg, { Path, Circle, G } from "react-native-svg";
+
+export type IconProps = {
+  size?: number;
+  color?: string;
+  style?: object;
+};
+
+export const ArrowRightIcon = ({ size = 16, color = "currentColor", style }: IconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 16 16" fill="none" style={style}>
+    <Path d="M3 8h10M9 4l4 4-4 4" stroke={color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
+  </Svg>
+);
+
+export const ArrowRightCircleIcon = ({ size = 20, color = "currentColor", style }: IconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 20 20" fill="none" style={style}>
+    <Circle cx="10" cy="10" r="7.25" stroke={color} strokeWidth={1.5} />
+    <Path d="M8.25 10h4.5M11 7.75L13.25 10 11 12.25" stroke={color} strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" />
+  </Svg>
+);
+
+export const ArrowLeftIcon = ({ size = 16, color = "currentColor", style }: IconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 16 16" fill="none" style={style}>
+    <Path d="M13 8H3M7 4L3 8l4 4" stroke={color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
+  </Svg>
+);
+
+export const ChevronDownIcon = ({ size = 20, color = "currentColor", style }: IconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 20 20" fill="none" style={style}>
+    <Path d="M5 7.5l5 5 5-5" stroke={color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
+  </Svg>
+);
+
+export const ChevronLeftIcon = ({ size = 20, color = "currentColor", style }: IconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 20 20" fill="none" style={style}>
+    <Path d="M12.5 5l-5 5 5 5" stroke={color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
+  </Svg>
+);
+
+export const CloseIcon = ({ size = 20, color = "currentColor", style }: IconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 20 20" fill="none" style={style}>
+    <Path d="M15 5L5 15M5 5l10 10" stroke={color} strokeWidth={2} strokeLinecap="round" />
+  </Svg>
+);
+
+export const ChatBubbleIcon = ({ size = 20, color = "currentColor", style }: IconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 20 20" fill={color} style={style}>
+    <Path fillRule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.083-.98L2 17l1.338-3.123C2.493 12.767 2 11.434 2 10c0-3.866 3.582-7 8-7s8 3.134 8 7z" clipRule="evenodd" />
+  </Svg>
+);
+
+export const MinimizeIcon = ({ size = 16, color = "currentColor", style }: IconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 16 16" fill="none" style={style}>
+    <Path d="M3 8h10" stroke={color} strokeWidth={2} strokeLinecap="round" />
+  </Svg>
+);
+
+export const DotsIcon = ({ size = 20, color = "currentColor", style }: IconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 20 20" fill={color} style={style}>
+    <Circle cx="5" cy="10" r="1.5" />
+    <Circle cx="10" cy="10" r="1.5" />
+    <Circle cx="15" cy="10" r="1.5" />
+  </Svg>
+);
+
+export const HistoryChatsIcon = ({ size = 24, color = "currentColor", style }: IconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" style={style}>
+    <Path d="M12 8v4l2.5 1.5M21 12a9 9 0 11-3-6.7" stroke={color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
+    <Path d="M21 3v4h-4" stroke={color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
+  </Svg>
+);
+
+export const SendPlaneIcon = ({ size = 24, color = "currentColor", style }: IconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" style={style}>
+    <Path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z" stroke={color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
+  </Svg>
+);
+
+export const PaperclipIcon = ({ size = 24, color = "currentColor", style }: IconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" style={style}>
+    <Path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48" stroke={color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
+  </Svg>
+);
+
+export const DownloadIcon = ({ size = 24, color = "currentColor", style }: IconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" style={style}>
+    <Path d="M12 15V3" stroke={color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
+    <Path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" stroke={color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
+    <Path d="m7 10 5 5 5-5" stroke={color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
+  </Svg>
+);
+
+export const PlayIcon = ({ size = 24, color = "currentColor", style }: IconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 512 512" fill={color} style={style}>
+    <Path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm115.7 272l-176 101c-15.8 8.8-35.7-2.5-35.7-21V152c0-18.4 19.8-29.8 35.7-21l176 107c16.4 9.2 16.4 32.9 0 42z" />
+  </Svg>
+);
+
+export const FileIcon = ({ size = 24, color = "currentColor", style }: IconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 384 512" fill={color} style={style}>
+    <Path d="M0 64C0 28.7 28.7 0 64 0L224 0l0 128c0 17.7 14.3 32 32 32l128 0 0 288c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 64zm384 64l-128 0L256 0 384 128z" />
+  </Svg>
+);
+
+export const TurbodeskLogoIcon = ({ size = 24, color = "currentColor", style }: IconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 152 250" fill="none" style={style}>
+    <Path d="M51.5138 0H151.966L74.695 73.4069H0L51.5138 0Z" fill={color} />
+    <Path d="M74.7266 73.4069L151.997 0V249.584L74.7266 217.774V73.4069Z" fill={color} />
+  </Svg>
+);