streamplace / js / app / components / mobile / chat.tsx

import {
  Chat,
  ChatBox,
  Loader,
  Resizable,
  Text,
  useHandle,
  useLivestreamInfo,
  View,
  zero,
} from "@streamplace/components";
import { useKeyboard } from "hooks/useKeyboard";
import { useEffect } from "react";
import { Pressable } from "react-native";
import Animated, {
  useAnimatedStyle,
  useSharedValue,
  withSpring,
} from "react-native-reanimated";

import { useNavigation } from "@react-navigation/native";
import { usePDSAgent } from "@streamplace/components/src/streamplace-store/xrpc";
import emojiData from "assets/emoji-data.json";
import { ArrowRight } from "lucide-react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
const { borderRadius, gap, layout, flex, px, position, bottom } = zero;

export function DesktopChatPanel({ chatVisible, chatPanelWidth }) {
  let insets = useSafeAreaInsets();
  let panelWidthWithInsets = chatPanelWidth;
  const sidebarOffset = useSharedValue(chatVisible ? 0 : panelWidthWithInsets);
  const sidebarOpacity = useSharedValue(chatVisible ? 1 : 0);

  const kb = useKeyboard();

  useEffect(() => {
    console.log(
      "Setting sidebar offset x to",
      chatVisible ? 0 : panelWidthWithInsets,
    );
    sidebarOffset.value = withSpring(chatVisible ? 0 : panelWidthWithInsets, {
      damping: 100,
      stiffness: 1000,
    });
    sidebarOpacity.value = withSpring(chatVisible ? 1 : 0, {
      damping: 100,
      stiffness: 1000,
    });
  }, [chatVisible, panelWidthWithInsets, sidebarOffset]);

  const animatedSidebarStyle = useAnimatedStyle(() => ({
    transform: [
      { translateX: sidebarOffset.value },
      { translateY: -kb.keyboardHeight },
    ],
    opacity: sidebarOpacity.value,
  }));

  return (
    <>
      <Animated.View
        style={[
          {
            width: chatPanelWidth,
            flexShrink: 0,
          },
          animatedSidebarStyle,
        ]}
      />
      <Animated.View
        style={[
          {
            position: "absolute",
            right: 0,
            // attempt to lessen the impact of the safe area inset on the chat panel?
            paddingRight: insets.right > 0 ? insets.right - 20 : 0,
            top: 0,
            bottom: 0,
            width: panelWidthWithInsets,
            flexShrink: 0,
            backgroundColor: "rgba(0, 0, 0, 0.85)",
            borderLeftWidth: 1,
            borderLeftColor: "rgba(255, 255, 255, 0.1)",
            zIndex: 999,
          },
          animatedSidebarStyle,
        ]}
      >
        <View style={{ flex: 1, position: "relative" }}>
          <ChatPanel />
        </View>
      </Animated.View>
    </>
  );
}

// MobileChatPanel.tsx
export function MobileChatPanel({ isPlayerRatioGreater }) {
  return (
    <View
      style={[
        isPlayerRatioGreater
          ? layout.position.relative
          : layout.position.absolute,
        bottom[0],
        { width: "100%", maxWidth: "100%" },
      ]}
    >
      <Resizable
        isPlayerRatioGreater={isPlayerRatioGreater}
        startingPercentage={0.4}
      >
        <ChatPanel />
      </Resizable>
    </View>
  );
}

function ChatPanel() {
  const { profile } = useLivestreamInfo();
  const handle = useHandle();

  let agent = usePDSAgent();

  const navigation = useNavigation();

  return (
    <View
      style={[
        layout.flex.column,
        flex.values[1],
        { width: "100%", maxWidth: "100%" },
        px[2],
      ]}
    >
      <View style={[flex.values[1]]}>
        <Chat />
      </View>
      <View style={[layout.flex.column, gap.all[2]]}>
        {agent?.did ? (
          <ChatBox
            emojiData={emojiData}
            chatBoxStyle={{ borderRadius: borderRadius.xl }}
          />
        ) : !agent ? (
          <View
            style={[
              layout.flex.row,
              layout.flex.center,
              gap.all[1],
              zero.p[3],
              {
                borderRadius: borderRadius.xl,
                backgroundColor: "rgba(255, 255, 255, 0.1)",
              },
            ]}
          >
            <Loader size="large" />
          </View>
        ) : (
          <Pressable
            onPress={() => navigation.navigate("Login")}
            style={[
              layout.flex.row,
              layout.flex.center,
              gap.all[4],
              {
                padding: 18,
                borderRadius: borderRadius.xl,
                backgroundColor: "rgba(255, 255, 255, 0.1)",
              },
            ]}
          >
            <Text>Log in or sign up to chat</Text>
            <ArrowRight />
          </Pressable>
        )}
      </View>
    </View>
  );
}