feat: add typing indicator with ChatBubble component

- Add ChatBubble component for reusable chat bubble styling
- Add TypingIndicator component with animated dots (. .. ...)
- Show typing indicator after 500ms delay while waiting for AI response
- Refactor ChatMessage to use ChatBubble component
- Add isWaitingForResponse state to ChatStore
This commit is contained in:
2026-01-12 22:49:21 +01:00
parent 489c0271c9
commit 1dbca79edd
5 changed files with 97 additions and 15 deletions

View File

@@ -0,0 +1,28 @@
import { View, ViewStyle } from "react-native";
import colors from "../Themes";
type BubbleSide = "left" | "right";
type ChatBubbleProps = {
side: BubbleSide;
children: React.ReactNode;
className?: string;
style?: ViewStyle;
};
export function ChatBubble({ side, children, className = "", style }: ChatBubbleProps) {
const borderColor = side === "left" ? colors.chatBot : colors.primeFg;
const sideClass =
side === "left"
? "self-start ml-2 rounded-bl-sm"
: "self-end mr-2 rounded-br-sm";
return (
<View
className={`bg-white border-2 border-solid rounded-xl my-2 ${sideClass} ${className}`}
style={[{ borderColor, elevation: 8 }, style]}
>
{children}
</View>
);
}