+
+
{
+ setInput(e.currentTarget.innerText);
+ }}
+ onKeyDownCapture={(e) => {
+ onKeyDown(e);
+ }}
+ />
+
+ {disableinput ? (
+
+ ) : (
+ <>
+
+
+ )}
+
+
+ {BOTTOMTEXT}
+
+
+
+ {messageFetching && (
+
+ )}
+
+ );
+}
diff --git a/FreedomGPT/src/app/components/Message.tsx b/FreedomGPT/src/app/components/Message.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5bb976a54ed8c68db3ab42d11af06964a1af6313
--- /dev/null
+++ b/FreedomGPT/src/app/components/Message.tsx
@@ -0,0 +1,111 @@
+import { useMessageFetching } from "../context/MessageFetch";
+import { MessageType } from "../types/types";
+
+const Reply = ({ message, id }: { message: string; id: string }) => {
+ const { messageFetching, messages } = useMessageFetching();
+
+ const trimmedMessage = message.slice(2);
+
+ return (
+
+ {!messageFetching && messages[messages.length - 1].id === id && (
+
+ )}
+
+ {messages[messages.length - 1].id !== id && (
+
+ )}
+ {messageFetching && messages[messages.length - 1].id === id && (
+
+ {trimmedMessage}
+
+ ||
+
+
+ )}
+
+ );
+};
+
+export default function Message({ user, message, id }: MessageType) {
+ return (
+
+
+
+ {user ? (
+
+ 🗣️
+
+ ) : (
+
+ 🗽
+
+ )}
+
+
+ {user ? message.trim() : }
+
+
+
+ );
+}
diff --git a/FreedomGPT/src/app/components/Messages.tsx b/FreedomGPT/src/app/components/Messages.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..03fdf9dbd14c4c4fa93c24b13cacef09c3224935
--- /dev/null
+++ b/FreedomGPT/src/app/components/Messages.tsx
@@ -0,0 +1,45 @@
+import { useEffect, useRef } from "react";
+import { MessageType } from "../types/types";
+import Message from "./Message";
+
+type MessagesProps = {
+ messages: MessageType[];
+};
+
+export default function Messages({ messages }: MessagesProps) {
+ const scrollRef = useRef
(null);
+ useEffect(updateScroll, [messages]);
+
+ function updateScroll() {
+ scrollRef.current?.scrollIntoView({ behavior: "smooth" });
+ }
+
+ return (
+
+ <>
+ {messages.map((item, index) => {
+ return (
+
+
+
+ );
+ })}
+
+
+
+ {messages.length != 0 ? (
+
+ ) : (
+
+ )}
+
+
+
+
+
+
+
{APPNAME}
+
+ {initialMessages.map(({ id, type, icon, messages }) => {
+ if (type == "Examples") {
+ return (
+
+ {icon}
+
{type}
+ {messages.map((msg, index) => {
+ return (
+
{
+ e.currentTarget.style.backgroundColor = "#444";
+ }}
+ onMouseOut={(e) => {
+ e.currentTarget.style.backgroundColor = "#000";
+ }}
+ onClick={() => {
+ setInput(msg);
+ if (inputRef.current) {
+ inputRef.current.innerText = msg;
+ }
+ }}
+ >
+ "{msg}"
+
+ );
+ })}
+
+ );
+ }
+
+ return (
+
+ {icon}
+
{type}
+ {messages.map((msg, index) => {
+ return (
+
+ {msg}
+
+ );
+ })}
+
+ );
+ })}
+
+
+
+
{
+ setInput(e.currentTarget.innerText);
+ }}
+ onKeyDownCapture={(e) => {
+ onKeyDown(e);
+ }}
+ />
+
+ {disableinput ? (
+
+ ) : (
+ <>
+
+
+ )}
+
+
+ {BOTTOMTEXT}
+
+
+
+ {messageFetching && (
+
+ )}
+
+ );
+}
diff --git a/src/app/components/Message.tsx b/src/app/components/Message.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5bb976a54ed8c68db3ab42d11af06964a1af6313
--- /dev/null
+++ b/src/app/components/Message.tsx
@@ -0,0 +1,111 @@
+import { useMessageFetching } from "../context/MessageFetch";
+import { MessageType } from "../types/types";
+
+const Reply = ({ message, id }: { message: string; id: string }) => {
+ const { messageFetching, messages } = useMessageFetching();
+
+ const trimmedMessage = message.slice(2);
+
+ return (
+
+ {!messageFetching && messages[messages.length - 1].id === id && (
+
+ )}
+
+ {messages[messages.length - 1].id !== id && (
+
+ )}
+ {messageFetching && messages[messages.length - 1].id === id && (
+
+ {trimmedMessage}
+
+ ||
+
+
+ )}
+
+ );
+};
+
+export default function Message({ user, message, id }: MessageType) {
+ return (
+
+
+
+ {user ? (
+
+ 🗣️
+
+ ) : (
+
+ 🗽
+
+ )}
+
+
+ {user ? message.trim() : }
+
+
+
+ );
+}
diff --git a/src/app/components/Messages.tsx b/src/app/components/Messages.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..03fdf9dbd14c4c4fa93c24b13cacef09c3224935
--- /dev/null
+++ b/src/app/components/Messages.tsx
@@ -0,0 +1,45 @@
+import { useEffect, useRef } from "react";
+import { MessageType } from "../types/types";
+import Message from "./Message";
+
+type MessagesProps = {
+ messages: MessageType[];
+};
+
+export default function Messages({ messages }: MessagesProps) {
+ const scrollRef = useRef
(null);
+ useEffect(updateScroll, [messages]);
+
+ function updateScroll() {
+ scrollRef.current?.scrollIntoView({ behavior: "smooth" });
+ }
+
+ return (
+
+ <>
+ {messages.map((item, index) => {
+ return (
+
+
+
+ );
+ })}
+
+
+
+ {messages.length != 0 ? (
+
+ ) : (
+
+ )}
+
+
+
+
+
+