user.$id_index.tsx

export async function action({ request, params }: ActionFunctionArgs) {
  const formData = await request.formData();
  const message = formData.get("message");
  const userId = params.id;

  const newChat = await db
    .insert(chats)
    .values({
      userId: userId as string,
      title: `New Chat ${Date.now().toString()}`,
      createdAt: new Date(),
      updatedAt: new Date(),
    })
    .returning();

  const newMessageId = newChat[0].id;

  await db.insert(messages).values({
    chatId: newMessageId,
    role: "user",
    content: message as string,
    createdAt: new Date(),
  });

  // Redirect to the same page with the message as a search param
  return redirect(
    `/user/${userId}/chat/${newMessageId}?message=${encodeURIComponent(
      message as string,
    )}`,
  );
}

export default function Component() {
  return (
    <div className="border-t border-border bg-background py-2 lg:py-4 px-2">
      <Form
        method="post"
        action={`/new-chat-message`}
        className="flex max-w-[1200px] mx-auto relative"
      >
        <Input
          ref={inputRef}
          type="text"
          name="message"
          placeholder="Type your message..."
          className="flex-1 border border-input bg-background px-3 h-10 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring pr-12"
        />
        <Button
          variant="default"
          size="icon"
          type="submit"
          className="absolute right-1 top-1/2 size-8 -translate-y-1/2 bg-primary text-primary-foreground hover:bg-primary/90 transition-colors"
        >
          <ArrowUp className="w-4 h-4" />
        </Button>
      </Form>
    </div>
  );
}