diff --git a/components/skeletons/first.tsx b/components/skeletons/first.tsx
new file mode 100644
index 0000000..96ea333
--- /dev/null
+++ b/components/skeletons/first.tsx
@@ -0,0 +1,113 @@
+"use client";
+import React from "react";
+import { motion } from "framer-motion";
+import Image from "next/image";
+import { BlurImage } from "../blur-image";
+
+export const SkeletonOne = () => {
+ return (
+
+
+
+
+ I want to generate an image of two people, fighting outside a bar.
+ They fight to the core. Once they're done, they sit down and
+ drink beer.
+
+
+ Certainly, I'm generating this picture for you in a while. BTW
+ are you talking about THAT movie?
+
+
+ I don't know what you're talking about.
+
+
Are you sure?
+
+ Yes, I'm sure. But if you're generating that scene, make
+ sure the fighters have clown shoes and rubber chickens instead of
+ fists!
+
+
Affirmative, here's your image.
+
+
+
+
+
+
{children}
+
+ );
+};
+
+const AIMessage = ({ children }: { children: React.ReactNode }) => {
+ const variantsSecond = {
+ initial: {
+ x: 0,
+ },
+ animate: {
+ x: 10,
+ transition: {
+ duration: 0.2,
+ },
+ },
+ };
+ return (
+
+
+ {children}
+
+ );
+};