Gilmour109/calchat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

implement chat messaging with event proposals

Browse Source 
- Add functional chat with server communication and test responses
- Add ProposedEventCard component for confirm/reject actions
- Move Constants (Day, Month) from client to shared package
- Add dateHelpers utility for weekday calculations
- Extend Themes.tsx with button and text colors
- Update CLAUDE.md with current implementation status
- Add *.tsbuildinfo to .gitignore
This commit is contained in:
Linus Waldowsky
2026-01-04 00:01:26 +01:00
parent e553103470
commit c33508a227
17 changed files with 456 additions and 295 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
apps/client/src/Constants.tsx
View File

@@ -1,28 +0,0 @@
export const MONTHS = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
] as const;
export type Month = (typeof MONTHS)[number];
export const DAYS = [
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday",
"Sunday",
] as const;
export type Day = (typeof DAYS)[number];

12
apps/client/src/Themes.tsx
View File

@@ -5,6 +5,12 @@ type Theme = {
messageBorderBg: string,
placeholderBg: string,
calenderBg: string,
confirmButton: string,
rejectButton: string,
disabledButton: string,
buttonText: string,
textSecondary: string,
textMuted: string,
}
const defaultLight: Theme = {
@@ -14,6 +20,12 @@ const defaultLight: Theme = {
messageBorderBg: "#FFFFFF",
placeholderBg: "#D9D9D9",
calenderBg: "#FBD5B2",
confirmButton: "#22c55e",
rejectButton: "#ef4444",
disabledButton: "#ccc",
buttonText: "#fff",
textSecondary: "#666",
textMuted: "#888",
}
let currentTheme: Theme = defaultLight;

2
apps/client/src/app/(tabs)/calendar.tsx
View File

@@ -1,5 +1,5 @@
import { Animated, Modal, Pressable, Text, View } from "react-native";
import { DAYS, MONTHS, Month } from "../../Constants";
import { DAYS, MONTHS, Month } from "@caldav/shared";
import Header from "../../components/Header";
import React, { useEffect, useMemo, useRef, useState } from "react";
import currentTheme from "../../Themes";

393
apps/client/src/app/(tabs)/chat.tsx
View File

@@ -1,9 +1,12 @@
import { View, Text, TextInput } from "react-native";
import { View, Text, TextInput, Pressable } from "react-native";
import currentTheme from "../../Themes";
import { useState } from "react";
import Header from "../../components/Header";
import BaseBackground from "../../components/BaseBackground";
import { FlashList } from "@shopify/flash-list";
import { ChatService } from "../../services";
import { ProposedEventChange } from "@caldav/shared";
import { ProposedEventCard } from "../../components/ProposedEventCard";
// TODO: better shadows for everything
// (maybe with extra library because of differences between android and ios)
@@ -11,239 +14,91 @@ import { FlashList } from "@shopify/flash-list";
// TODO: create new messages
type BubbleSide = "left" | "right";
type ChatMessageProps = {
side: BubbleSide;
width: number;
height: number;
content: string;
proposedChange?: ProposedEventChange;
respondedAction?: "confirm" | "reject";
onConfirm?: () => void;
onReject?: () => void;
};
type MessageData = {
type MessageData = ChatMessageProps & {
id: string;
side: BubbleSide;
width: number;
height: number;
conversationId?: string;
};
// NOTE: only for testing
const getRandomInt = (min: number, max: number) => {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
type ChatInputProps = {
onSend: (text: string) => void;
};
const randomWidth = () => getRandomInt(100, 400);
const randomHeight = () => getRandomInt(50, 100);
const messages: MessageData[] = [
// {{{
{
id: "1",
side: "left",
width: randomWidth(),
height: randomHeight(),
},
{
id: "2",
side: "right",
width: randomWidth(),
height: randomHeight(),
},
{
id: "3",
side: "left",
width: randomWidth(),
height: randomHeight(),
},
{
id: "4",
side: "right",
width: randomWidth(),
height: randomHeight(),
},
{
id: "5",
side: "left",
width: randomWidth(),
height: randomHeight(),
},
{
id: "6",
side: "right",
width: randomWidth(),
height: randomHeight(),
},
{
id: "7",
side: "left",
width: randomWidth(),
height: randomHeight(),
},
{
id: "8",
side: "right",
width: randomWidth(),
height: randomHeight(),
},
{
id: "9",
side: "left",
width: randomWidth(),
height: randomHeight(),
},
{
id: "10",
side: "right",
width: randomWidth(),
height: randomHeight(),
},
// {
// id: "11",
// side: "left",
// width: randomWidth(),
// height: randomHeight(),
// },
// {
// id: "12",
// side: "right",
// width: randomWidth(),
// height: randomHeight(),
// },
// {
// id: "13",
// side: "left",
// width: randomWidth(),
// height: randomHeight(),
// },
// {
// id: "14",
// side: "right",
// width: randomWidth(),
// height: randomHeight(),
// },
// {
// id: "15",
// side: "left",
// width: randomWidth(),
// height: randomHeight(),
// },
// {
// id: "16",
// side: "right",
// width: randomWidth(),
// height: randomHeight(),
// },
// {
// id: "17",
// side: "left",
// width: randomWidth(),
// height: randomHeight(),
// },
// {
// id: "18",
// side: "right",
// width: randomWidth(),
// height: randomHeight(),
// },
// {
// id: "19",
// side: "left",
// width: randomWidth(),
// height: randomHeight(),
// },
// {
// id: "20",
// side: "right",
// width: randomWidth(),
// height: randomHeight(),
// },
// {
// id: "21",
// side: "left",
// width: randomWidth(),
// height: randomHeight(),
// },
// {
// id: "22",
// side: "right",
// width: randomWidth(),
// height: randomHeight(),
// },
// {
// id: "23",
// side: "left",
// width: randomWidth(),
// height: randomHeight(),
// },
// {
// id: "24",
// side: "right",
// width: randomWidth(),
// height: randomHeight(),
// },
// {
// id: "25",
// side: "left",
// width: randomWidth(),
// height: randomHeight(),
// },
// {
// id: "26",
// side: "right",
// width: randomWidth(),
// height: randomHeight(),
// },
// {
// id: "27",
// side: "left",
// width: randomWidth(),
// height: randomHeight(),
// },
// {
// id: "28",
// side: "right",
// width: randomWidth(),
// height: randomHeight(),
// },
// {
// id: "29",
// side: "left",
// width: randomWidth(),
// height: randomHeight(),
// },
// {
// id: "30",
// side: "right",
// width: randomWidth(),
// height: randomHeight(),
// },
// {
// id: "31",
// side: "left",
// width: randomWidth(),
// height: randomHeight(),
// },
// {
// id: "32",
// side: "right",
// width: randomWidth(),
// height: randomHeight(),
// },
// {
// id: "33",
// side: "left",
// width: randomWidth(),
// height: randomHeight(),
// },
// {
// id: "34",
// side: "right",
// width: randomWidth(),
// height: randomHeight(),
// },
//, width: randomWidth, height: getRandomInt(50, 500) }}}
];
const Chat = () => {
const [messages, setMessages] = useState<MessageData[]>([]);
const handleEventResponse = async (
action: "confirm" | "reject",
messageId: string,
conversationId: string
) => {
// Mark message as responded (optimistic update)
setMessages((prev) =>
prev.map((msg) =>
msg.id === messageId ? { ...msg, respondedAction: action } : msg
)
);
try {
const response =
action === "confirm"
? await ChatService.confirmEvent(conversationId, messageId)
: await ChatService.rejectEvent(conversationId, messageId);
const botMessage: MessageData = {
id: response.message.id,
side: "left",
content: response.message.content,
conversationId: response.conversationId,
};
setMessages((prev) => [...prev, botMessage]);
} catch (error) {
console.error(`Failed to ${action} event:`, error);
// Revert on error
setMessages((prev) =>
prev.map((msg) =>
msg.id === messageId ? { ...msg, respondedAction: undefined } : msg
)
);
}
};
const handleSend = async (text: string) => {
// Show user message immediately
const userMessage: MessageData = {
id: Date.now().toString(),
side: "right",
content: text,
};
setMessages((prev) => [...prev, userMessage]);
try {
// Fetch server response
const response = await ChatService.sendMessage({ content: text });
// Show bot response
const botMessage: MessageData = {
id: response.message.id,
side: "left",
content: response.message.content,
proposedChange: response.message.proposedChange,
conversationId: response.conversationId,
};
setMessages((prev) => [...prev, botMessage]);
} catch (error) {
console.error("Failed to send message:", error);
}
};
return (
<BaseBackground>
<ChatHeader />
@@ -252,18 +107,20 @@ const Chat = () => {
renderItem={({ item }) => (
<ChatMessage
side={item.side}
width={item.width}
height={item.height}
content={item.content}
proposedChange={item.proposedChange}
respondedAction={item.respondedAction}
onConfirm={() =>
handleEventResponse("confirm", item.id, item.conversationId!)
}
onReject={() =>
handleEventResponse("reject", item.id, item.conversationId!)
}
/>
)}
maintainVisibleContentPosition={{
autoscrollToBottomThreshold: 0.2,
startRenderingFromBottom: true,
}}
keyExtractor={(item) => item.id}
// extraData={selectedId} might need this later for re-rendering
/>
<ChatInput />
<ChatInput onSend={handleSend} />
</BaseBackground>
);
};
@@ -297,51 +154,81 @@ const ChatHeader = () => {
);
};
const ChatInput = () => {
const [text, onChangeText] = useState("Nachricht");
const MIN_INPUT_HEIGHT = 40;
const MAX_INPUT_HEIGHT = 150;
const ChatInput = ({ onSend }: ChatInputProps) => {
const [text, setText] = useState("");
const handleSend = () => {
if (text.trim()) {
onSend(text.trim());
setText("");
}
};
return (
<View className="flex flex-row w-full h-8 my-2">
<View className="flex flex-row w-full items-end my-2 px-2">
<TextInput
className="w-4/5 h-full border border-solid rounded-2xl mx-2 px-2"
className="flex-1 border border-solid rounded-2xl px-3 py-2 mr-2"
style={{
backgroundColor: currentTheme.messageBorderBg,
minHeight: MIN_INPUT_HEIGHT,
maxHeight: MAX_INPUT_HEIGHT,
textAlignVertical: "top",
}}
onChangeText={onChangeText}
onChangeText={setText}
value={text}
placeholder="Nachricht..."
placeholderTextColor="#999"
multiline
/>
<View
className="w-8 h-full rounded-2xl"
style={{
backgroundColor: currentTheme.placeholderBg,
}}
></View>
<Pressable onPress={handleSend}>
<View
className="w-10 h-10 rounded-full items-center justify-center"
style={{
backgroundColor: currentTheme.placeholderBg,
}}
/>
</Pressable>
</View>
);
};
const ChatMessage = (props: ChatMessageProps) => {
const ChatMessage = ({
side,
content,
proposedChange,
respondedAction,
onConfirm,
onReject,
}: ChatMessageProps) => {
const borderColor =
props.side === "left" ? currentTheme.chatBot : currentTheme.primeFg;
side === "left" ? currentTheme.chatBot : currentTheme.primeFg;
const selfSide =
props.side === "left"
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 ` + `${selfSide}`
}
className={`bg-white border-2 border-solid rounded-xl my-2 ${selfSide}`}
style={{
width: props.width,
height: props.height,
borderColor: borderColor,
maxWidth: "80%",
elevation: 8,
}}
>
<Text className="p-1">Lorem Ipsum Dolor sit amet</Text>
<Text className="p-2">{content}</Text>
{proposedChange && onConfirm && onReject && (
<ProposedEventCard
proposedChange={proposedChange}
respondedAction={respondedAction}
onConfirm={onConfirm}
onReject={onReject}
/>
)}
</View>
);
};

86
apps/client/src/components/ProposedEventCard.tsx Normal file
View File

@@ -0,0 +1,86 @@
import { View, Text, Pressable } from "react-native";
import { ProposedEventChange } from "@caldav/shared";
import currentTheme from "../Themes";
type ProposedEventCardProps = {
proposedChange: ProposedEventChange;
respondedAction?: "confirm" | "reject";
onConfirm: () => void;
onReject: () => void;
};
function formatDateTime(date?: Date): string {
if (!date) return "";
const d = new Date(date);
return d.toLocaleDateString("de-DE", {
weekday: "long",
day: "2-digit",
month: "2-digit",
hour: "2-digit",
minute: "2-digit",
});
}
export const ProposedEventCard = ({
proposedChange,
respondedAction,
onConfirm,
onReject,
}: ProposedEventCardProps) => {
const event = proposedChange.event;
const isDisabled = !!respondedAction;
return (
<View
className="border-t p-2 mt-2"
style={{ borderTopColor: currentTheme.placeholderBg }}
>
{/* Event Details */}
<Text className="font-bold text-base">{event?.title}</Text>
<Text style={{ color: currentTheme.textSecondary }}>
{formatDateTime(event?.startTime)}
</Text>
{event?.isRecurring && (
<Text style={{ color: currentTheme.textMuted }} className="text-sm">
Wiederkehrend
</Text>
)}
{/* Buttons */}
<View className="flex-row mt-3 gap-2">
<Pressable
onPress={onConfirm}
disabled={isDisabled}
className="flex-1 py-2 rounded-lg items-center"
style={{
backgroundColor: isDisabled
? currentTheme.disabledButton
: currentTheme.confirmButton,
borderWidth: respondedAction === "confirm" ? 2 : 0,
borderColor: currentTheme.confirmButton,
}}
>
<Text style={{ color: currentTheme.buttonText }} className="font-medium">
Annehmen
</Text>
</Pressable>
<Pressable
onPress={onReject}
disabled={isDisabled}
className="flex-1 py-2 rounded-lg items-center"
style={{
backgroundColor: isDisabled
? currentTheme.disabledButton
: currentTheme.rejectButton,
borderWidth: respondedAction === "reject" ? 2 : 0,
borderColor: currentTheme.rejectButton,
}}
>
<Text style={{ color: currentTheme.buttonText }} className="font-medium">
Ablehnen
</Text>
</Pressable>
</View>
</View>
);
};

23
apps/client/src/services/ApiClient.ts
View File

@@ -1,5 +1,5 @@
const API_BASE_URL =
process.env.EXPO_PUBLIC_API_URL || "http://localhost:3000/api";
process.env.EXPO_PUBLIC_API_URL || "http://localhost:3001/api";
type HttpMethod = "GET" | "POST" | "PUT" | "DELETE";
@@ -9,11 +9,24 @@ interface RequestOptions {
}
async function request<T>(
_method: HttpMethod,
_endpoint: string,
_options?: RequestOptions,
method: HttpMethod,
endpoint: string,
options?: RequestOptions,
): Promise<T> {
throw new Error("Not implemented");
const response = await fetch(`${API_BASE_URL}${endpoint}`, {
method,
headers: {
"Content-Type": "application/json",
...options?.headers,
},
body: options?.body ? JSON.stringify(options.body) : undefined,
});
if (!response.ok) {
throw new Error(`HTTP ${response.status}`);
}
return response.json();
}
export const ApiClient = {

24
apps/client/src/services/ChatService.ts
View File

@@ -4,26 +4,26 @@ import {
ChatMessage,
ConversationSummary,
GetMessagesOptions,
CalendarEvent,
} from '@caldav/shared';
} from "@caldav/shared";
import { ApiClient } from "./ApiClient";
export const ChatService = {
sendMessage: async (_data: SendMessageDTO): Promise<ChatResponse> => {
throw new Error('Not implemented');
sendMessage: async (data: SendMessageDTO): Promise<ChatResponse> => {
return ApiClient.post<ChatResponse>("/chat/message", data);
},
confirmEvent: async (
_conversationId: string,
_messageId: string
): Promise<CalendarEvent> => {
throw new Error('Not implemented');
conversationId: string,
messageId: string
): Promise<ChatResponse> => {
return ApiClient.post<ChatResponse>(`/chat/confirm/${conversationId}/${messageId}`);
},
rejectEvent: async (
_conversationId: string,
_messageId: string
): Promise<void> => {
throw new Error('Not implemented');
conversationId: string,
messageId: string
): Promise<ChatResponse> => {
return ApiClient.post<ChatResponse>(`/chat/reject/${conversationId}/${messageId}`);
},
getConversations: async (): Promise<ConversationSummary[]> => {

2
apps/server/docker/mongo/compose.yml
View File

@@ -19,7 +19,7 @@ services:
image: mongo-express:latest
restart: always
ports:
- "8081:8081"
- "8083:8083"
environment:
ME_CONFIG_MONGODB_URL: mongodb://root:mongoose@mongo:27017/
ME_CONFIG_BASICAUTH_ENABLED: true

15
apps/server/src/app.ts
View File

@@ -15,6 +15,21 @@ const mongoUri = process.env.MONGODB_URI || 'mongodb://localhost:27017/caldav';
// Middleware
app.use(express.json());
// CORS - only needed for web browser development
// Native mobile apps don't send Origin headers and aren't affected by CORS
if (process.env.NODE_ENV !== 'production') {
app.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
if (req.method === 'OPTIONS') {
res.sendStatus(200);
return;
}
next();
});
}
// Initialize repositories
const userRepo = new MongoUserRepository();
const eventRepo = new MongoEventRepository();

28
apps/server/src/controllers/ChatController.ts
View File

@@ -1,4 +1,5 @@
import { Response } from 'express';
import { SendMessageDTO } from '@caldav/shared';
import { ChatService } from '../services';
import { AuthenticatedRequest } from '../middleware';
@@ -6,15 +7,36 @@ export class ChatController {
constructor(private chatService: ChatService) {}
async sendMessage(req: AuthenticatedRequest, res: Response): Promise<void> {
throw new Error('Not implemented');
try {
const userId = req.user!.userId;
const data: SendMessageDTO = req.body;
const response = await this.chatService.processMessage(userId, data);
res.json(response);
} catch (error) {
res.status(500).json({ error: 'Failed to process message' });
}
}
async confirmEvent(req: AuthenticatedRequest, res: Response): Promise<void> {
throw new Error('Not implemented');
try {
const userId = req.user!.userId;
const { conversationId, messageId } = req.params;
const response = await this.chatService.confirmEvent(userId, conversationId, messageId);
res.json(response);
} catch (error) {
res.status(500).json({ error: 'Failed to confirm event' });
}
}
async rejectEvent(req: AuthenticatedRequest, res: Response): Promise<void> {
throw new Error('Not implemented');
try {
const userId = req.user!.userId;
const { conversationId, messageId } = req.params;
const response = await this.chatService.rejectEvent(userId, conversationId, messageId);
res.json(response);
} catch (error) {
res.status(500).json({ error: 'Failed to reject event' });
}
}
async getConversations(req: AuthenticatedRequest, res: Response): Promise<void> {

78
apps/server/src/services/ChatService.ts
View File

@@ -1,6 +1,49 @@
import { ChatMessage, ChatResponse, SendMessageDTO, CalendarEvent, ConversationSummary, GetMessagesOptions } from '@caldav/shared';
import { ChatMessage, ChatResponse, SendMessageDTO, ConversationSummary, GetMessagesOptions, ProposedEventChange, getDay } from '@caldav/shared';
import { ChatRepository, EventRepository, AIProvider } from './interfaces';
// Test responses array (cycles through responses)
let responseIndex = 0;
const testResponses: Array<{ content: string; proposedChange?: ProposedEventChange }> = [
// {{{
// Response 1: Meeting mit Jens - next Friday 14:00
{
content: "Alles klar! Ich erstelle dir einen Termin für das Meeting mit Jens am nächsten Freitag um 14:00 Uhr:",
proposedChange: {
action: 'create',
event: {
title: "Meeting mit Jens",
startTime: getDay('Friday', 1, 14, 0),
endTime: getDay('Friday', 1, 15, 0),
description: "Arbeitstreffen",
}
}
},
// Response 2: Recurring event - every Saturday 10:00
{
content: "Verstanden! Ich erstelle einen wiederkehrenden Termin: Jeden Samstag um 10:00 Uhr Badezimmer putzen:",
proposedChange: {
action: 'create',
event: {
title: "Badezimmer putzen",
startTime: getDay('Saturday', 1, 10, 0),
endTime: getDay('Saturday', 1, 11, 0),
isRecurring: true,
recurrenceRule: "FREQ=WEEKLY;BYDAY=SA",
}
}
},
// Response 3: Calendar overview (text only, no proposedChange)
{
content: "Hier sind deine Termine für die nächsten 2 Wochen:\n\n" +
"Freitag, 10.01. - 14:00 Uhr: Meeting mit Jens\n" +
"Samstag, 11.01. - 10:00 Uhr: Badezimmer putzen\n" +
"Samstag, 18.01. - 10:00 Uhr: Badezimmer putzen\n\n" +
"Insgesamt 3 Termine.",
},
// }}}
];
export class ChatService {
constructor(
private chatRepo: ChatRepository,
@@ -9,15 +52,38 @@ export class ChatService {
) {}
async processMessage(userId: string, data: SendMessageDTO): Promise<ChatResponse> {
throw new Error('Not implemented');
const response = testResponses[responseIndex % testResponses.length];
responseIndex++;
const message: ChatMessage = {
id: Date.now().toString(),
conversationId: data.conversationId || 'temp-conv-id',
sender: 'assistant',
content: response.content,
proposedChange: response.proposedChange,
};
return { message, conversationId: message.conversationId };
}
async confirmEvent(userId: string, conversationId: string, messageId: string): Promise<CalendarEvent> {
throw new Error('Not implemented');
async confirmEvent(userId: string, conversationId: string, messageId: string): Promise<ChatResponse> {
const message: ChatMessage = {
id: Date.now().toString(),
conversationId,
sender: 'assistant',
content: 'Der Vorschlag wurde angenommen.',
};
return { message, conversationId };
}
async rejectEvent(conversationId: string, messageId: string): Promise<void> {
throw new Error('Not implemented');
async rejectEvent(userId: string, conversationId: string, messageId: string): Promise<ChatResponse> {
const message: ChatMessage = {
id: Date.now().toString(),
conversationId,
sender: 'assistant',
content: 'Der Vorschlag wurde abgelehnt.',
};
return { message, conversationId };
}
async getConversations(userId: string): Promise<ConversationSummary[]> {