AI chat interface

const {
  currentChat,
  currentChatId,
  chatList,
  createNewChat,
  loadChat,
  deleteChat,
  updateChatTitle,
  syncMessages,
  isLoadingChat,
  isLoadingList
} = useMultiChat();

const suggestionCards = [
  {
    text: "Swap 0.001 SOL to USDC",
    image: require("@/assets/tool-logos/jupiter-logo.png"),
  },
  {
    text: "Lend 0.01 sol, against USDC",
    image: require("@/assets/tool-logos/rainfi-logo.png"),
  },
  {
    text: "Deposit 5 USDC on Lulo",
    image: require("@/assets/tool-logos/lulo-logo.png"),
  },
  {
    text: "Stake 0.01 SOL with Jupiter",
    image: require("@/assets/tool-logos/jupiter-logo.png"),
  },
];

const renderActionButtons = () => {
  if (message.role !== "assistant") return null;
  
  return (
    <View style={{ flexDirection: "row", gap: 8, marginTop: 12 }}>
      {!isLoading && (
        <TouchableOpacity onPress={handleCopy}>
          <UiIconSymbol 
            name={isCopied ? "checkmark" : "doc.on.doc"} 
            size={14} 
          />
        </TouchableOpacity>
      )}
      
      {!isLoading && isLast && (
        <TouchableOpacity onPress={handleRegenerate}>
          <UiIconSymbol 
            name="arrow.clockwise" 
            size={14} 
          />
        </TouchableOpacity>
      )}
    </View>
  );
};

const handleToolExecution = async () => {
  if (!agent || !addToolResult) return;
  
  setIsExecuting(true);
  try {
    const action = agent.actions.find((a) => a.name === toolName);
    if (!action) throw new Error(`Tool not found: ${toolName}`);
    
    const result = await executeAction(action, agent, args);
    
    addToolResult({
      toolCallId,
      result: JSON.stringify({ ...result, success: true })
    });
  } catch (error) {
    addToolResult({
      toolCallId,
      result: JSON.stringify({ success: false, error })
    });
  } finally {
    setIsExecuting(false);
  }
};

const formatDate = (timestamp: number) => {
  const date = new Date(timestamp);
  const now = new Date();
  const diffInHours = (now.getTime() - date.getTime()) / (1000 * 60 * 60);
  
  if (diffInHours < 24) {
    return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
  } else if (diffInHours < 168) {
    return date.toLocaleDateString([], { weekday: "short" });
  } else {
    return date.toLocaleDateString([], { month: "short", day: "numeric" });
  }
};

import Animated, { FadeIn, FadeInDown, FadeInUp } from "react-native-reanimated";

// Message entrance
<Animated.View entering={FadeIn.duration(300)}>
  {/* Message content */}
</Animated.View>

// Suggestion cards
<Animated.View entering={FadeInUp.delay(200).duration(600)}>
  {/* Suggestions */}
</Animated.View>

// Input field
<Animated.View entering={FadeInDown.delay(400).duration(600)}>
  {/* Chat input */}
</Animated.View>