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:
28
apps/client/src/components/ChatBubble.tsx
Normal file
28
apps/client/src/components/ChatBubble.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user