From 979728e6c8c74ad755014f33711b999fb7f77642 Mon Sep 17 00:00:00 2001
From: Benjamin Toby <devops@tben.me>
Date: Thu, 2 Oct 2025 08:16:11 +0100
Subject: [PATCH] Updates

---
 bun.lockb                                     | Bin
 components/lib/(partials)/ModalComponent.tsx  |   4 +-
 .../lib/(partials)/PopoverComponent.tsx       |   2 +
 components/lib/base.css                       |   2 +
 components/lib/editors/AceEditor.tsx          |  10 +-
 components/lib/editors/TinyMCE/index.tsx      |   7 +-
 components/lib/editors/TinyMCE/useTinyMCE.tsx |   3 +-
 components/lib/elements/Card.tsx              |   2 +-
 components/lib/elements/CopySlug.tsx          |  59 +++++++++++
 .../lib/elements/HeaderNavLinkComponent.tsx   |   4 +-
 components/lib/elements/LinkList.tsx          |   3 +-
 components/lib/elements/Paper.tsx             |   2 +-
 components/lib/elements/Search.tsx            |   4 +-
 components/lib/elements/Tabs.tsx              |   5 +
 components/lib/elements/Tag.tsx               |   2 +-
 .../lib/elements/ai/AIPromptActionSection.tsx |  81 ++++++++++++++
 components/lib/elements/ai/AIPromptBlock.tsx  |  98 +++++++++++++++++
 .../lib/elements/ai/AIPromptHistoryModal.tsx  |  99 ++++++++++++++++++
 .../lib/elements/ai/AIPromptPreview.tsx       |  51 +++++++++
 components/lib/form/Checkbox.tsx              |  41 +++++---
 components/lib/form/FileUpload.tsx            |  44 ++++++--
 components/lib/form/Input/index.tsx           |  19 +++-
 components/lib/form/Radios.tsx                |  79 ++++++++++++++
 components/lib/form/SearchSelect.tsx          |  93 ++++++++--------
 components/lib/form/Select.tsx                |   7 +-
 components/lib/hooks/useWebSocket.tsx         |   5 +-
 .../lib/hooks/useWebSocketEventHandler.tsx    |   5 +-
 components/lib/layout/Img.tsx                 |  31 ++++--
 components/lib/mdx/mdx-components.tsx         |   1 +
 components/pages/Home/(data)/work.ts          |  32 +++++-
 30 files changed, 695 insertions(+), 100 deletions(-)
 mode change 100755 => 100644 bun.lockb
 create mode 100644 components/lib/elements/CopySlug.tsx
 create mode 100644 components/lib/elements/ai/AIPromptActionSection.tsx
 create mode 100644 components/lib/elements/ai/AIPromptBlock.tsx
 create mode 100644 components/lib/elements/ai/AIPromptHistoryModal.tsx
 create mode 100644 components/lib/elements/ai/AIPromptPreview.tsx
 create mode 100644 components/lib/form/Radios.tsx

diff --git a/bun.lockb b/bun.lockb
old mode 100755
new mode 100644
diff --git a/components/lib/(partials)/ModalComponent.tsx b/components/lib/(partials)/ModalComponent.tsx
index 0ac05fa..ff71a83 100644
--- a/components/lib/(partials)/ModalComponent.tsx
+++ b/components/lib/(partials)/ModalComponent.tsx
@@ -1,4 +1,4 @@
-import React, { DetailedHTMLProps, HTMLAttributes } from "react";
+import React from "react";
 import { twMerge } from "tailwind-merge";
 import ReactDOM from "react-dom";
 import Button from "../layout/Button";
@@ -25,6 +25,8 @@ export default function ModalComponent({ open, setOpen, ...props }: Props) {
                 "flex flex-col items-center justify-center p-4",
                 "twui-modal-root"
             )}
+            role="dialog"
+            aria-modal="true"
         >
             <div
                 className={twMerge(
diff --git a/components/lib/(partials)/PopoverComponent.tsx b/components/lib/(partials)/PopoverComponent.tsx
index 91e3e6a..1da18d3 100644
--- a/components/lib/(partials)/PopoverComponent.tsx
+++ b/components/lib/(partials)/PopoverComponent.tsx
@@ -80,6 +80,8 @@ export default function PopoverComponent({
             onMouseLeave={
                 trigger === "hover" ? popoverLeaveFn : props.onMouseLeave
             }
+            role="dialog"
+            aria-modal="true"
         >
             {/* <div
                 className="absolute w-0 h-0 border-8 border-transparent bg-white"
diff --git a/components/lib/base.css b/components/lib/base.css
index 5097795..47cab24 100644
--- a/components/lib/base.css
+++ b/components/lib/base.css
@@ -2,6 +2,8 @@
 
 @theme inline {
     --breakpoint-xs: 350px;
+    --breakpoint-xxs: 300px;
+    --breakpoint-xxl: 1600px;
 
     --color-background-light: #ffffff;
     --color-foreground-light: #171717;
diff --git a/components/lib/editors/AceEditor.tsx b/components/lib/editors/AceEditor.tsx
index 985ed99..be185e8 100644
--- a/components/lib/editors/AceEditor.tsx
+++ b/components/lib/editors/AceEditor.tsx
@@ -69,7 +69,13 @@ export default function AceEditor({
                 theme: darkMode
                     ? "ace/theme/tomorrow_night_eighties"
                     : "ace/theme/ace_light",
-                value: content,
+                value: (() => {
+                    try {
+                        return JSON.stringify(JSON.parse(content), null, 4);
+                    } catch (error) {
+                        return content;
+                    }
+                })(),
                 placeholder: placeholder ? placeholder : "",
                 enableBasicAutocompletion: true,
                 enableLiveAutocompletion: true,
@@ -108,7 +114,7 @@ export default function AceEditor({
             return function () {
                 editor.destroy();
             };
-        }, [refresh, darkMode, ready, externalRefresh]);
+        }, [refresh, darkMode, ready, externalRefresh, content]);
 
         React.useEffect(() => {
             const htmlClassName = document.documentElement.className;
diff --git a/components/lib/editors/TinyMCE/index.tsx b/components/lib/editors/TinyMCE/index.tsx
index 09ac948..7d8c7b1 100644
--- a/components/lib/editors/TinyMCE/index.tsx
+++ b/components/lib/editors/TinyMCE/index.tsx
@@ -84,7 +84,7 @@ export default function TinyMCEEditor<KeyType extends string>({
                 if (defaultValue) editor.setContent(defaultValue);
                 setReady(true);
 
-                editor.on("input", (e) => {
+                editor.on("change", (e) => {
                     changeHandler?.(editor.getContent());
                 });
 
@@ -92,7 +92,7 @@ export default function TinyMCEEditor<KeyType extends string>({
                     useParentStyles(editor);
                 }
             },
-            base_url: "https://datasquirel.com/tinymce-public",
+            base_url: "https://www.datasquirel.com/tinymce-public",
             body_class: "twui-tinymce",
             placeholder,
             relative_urls: true,
@@ -118,6 +118,9 @@ export default function TinyMCEEditor<KeyType extends string>({
                 "bg-background-light dark:bg-background-dark",
                 wrapperWrapperProps?.className
             )}
+            onInput={(e) => {
+                console.log(`Input Detected`);
+            }}
         >
             {showLabel && (
                 <label
diff --git a/components/lib/editors/TinyMCE/useTinyMCE.tsx b/components/lib/editors/TinyMCE/useTinyMCE.tsx
index a368470..6480d4e 100644
--- a/components/lib/editors/TinyMCE/useTinyMCE.tsx
+++ b/components/lib/editors/TinyMCE/useTinyMCE.tsx
@@ -16,7 +16,8 @@ export default function useTinyMCE() {
         }
 
         const script = document.createElement("script");
-        script.src = "https://datasquirel.com/tinymce-public/tinymce.min.js";
+        script.src =
+            "https://www.datasquirel.com/tinymce-public/tinymce.min.js";
         script.async = true;
 
         document.head.appendChild(script);
diff --git a/components/lib/elements/Card.tsx b/components/lib/elements/Card.tsx
index d935ec8..eae0e3b 100644
--- a/components/lib/elements/Card.tsx
+++ b/components/lib/elements/Card.tsx
@@ -40,7 +40,7 @@ export default function Card({
             ref={elRef}
             {...props}
             className={twMerge(
-                "flex flex-row items-center p-4 rounded-default bg-white dark:bg-white/10",
+                "flex flex-row items-center p-4 rounded-default bg-background-light dark:bg-background-dark",
                 "border border-slate-200 dark:border-white/10 border-solid",
                 noHover ? "" : "twui-card",
                 props.className
diff --git a/components/lib/elements/CopySlug.tsx b/components/lib/elements/CopySlug.tsx
new file mode 100644
index 0000000..a2a58cd
--- /dev/null
+++ b/components/lib/elements/CopySlug.tsx
@@ -0,0 +1,59 @@
+import React, {
+    ComponentProps,
+    Dispatch,
+    ReactNode,
+    SetStateAction,
+} from "react";
+import { Copy, LucideProps } from "lucide-react";
+import Button from "../layout/Button";
+
+type Props = Omit<ComponentProps<typeof Button>, "title"> & {
+    slugText: string;
+    justIcon?: boolean;
+    noIcon?: boolean;
+    title?: string;
+    outlined?: boolean;
+    successMsg?: string | ReactNode;
+    icon?: ReactNode;
+    iconProps?: LucideProps;
+    setToastOpen?: Dispatch<SetStateAction<boolean>>;
+};
+
+export default function CopySlug({
+    slugText,
+    justIcon,
+    noIcon,
+    title,
+    outlined,
+    successMsg,
+    iconProps,
+    icon,
+    setToastOpen,
+    ...props
+}: Props) {
+    return (
+        <Button
+            title={title || slugText}
+            size="smaller"
+            variant="ghost"
+            color="gray"
+            {...props}
+            onClick={(e) => {
+                navigator.clipboard.writeText(slugText).then(() => {
+                    setToastOpen?.(false);
+
+                    setTimeout(() => {
+                        setToastOpen?.(true);
+                    }, 100);
+                });
+                props.onClick?.(e);
+            }}
+            style={{ ...(outlined ? {} : { padding: 0 }), ...props.style }}
+        >
+            {noIcon
+                ? null
+                : icon || <Copy size={outlined ? 15 : 20} {...iconProps} />}
+            {!justIcon && (title ? title : "Copy Slug")}
+        </Button>
+    );
+}
diff --git a/components/lib/elements/HeaderNavLinkComponent.tsx b/components/lib/elements/HeaderNavLinkComponent.tsx
index c963bc3..8f93ed7 100644
--- a/components/lib/elements/HeaderNavLinkComponent.tsx
+++ b/components/lib/elements/HeaderNavLinkComponent.tsx
@@ -103,8 +103,8 @@ export default function HeaderNavLinkComponent({
 
                     <Dropdown
                         target={mainLinkComponent}
-                        position="bottom-right"
-                        // hoverOpen
+                        position="center"
+                        hoverOpen
                         className="hidden xl:flex"
                     >
                         {dropdown ? (
diff --git a/components/lib/elements/LinkList.tsx b/components/lib/elements/LinkList.tsx
index 370e28e..58e38e6 100644
--- a/components/lib/elements/LinkList.tsx
+++ b/components/lib/elements/LinkList.tsx
@@ -130,7 +130,8 @@ export default function LinkList({
                                 {...link.linkProps}
                                 className={twMerge(
                                     "p-2 cursor-pointer whitespace-nowrap",
-                                    linkProps?.className
+                                    linkProps?.className,
+                                    link.linkProps?.className
                                 )}
                                 strict={link.strict}
                                 onClick={(e) => {
diff --git a/components/lib/elements/Paper.tsx b/components/lib/elements/Paper.tsx
index 601b074..8a18e0f 100644
--- a/components/lib/elements/Paper.tsx
+++ b/components/lib/elements/Paper.tsx
@@ -23,7 +23,7 @@ export default function Paper({
             {...props}
             ref={componentRef as any}
             className={twMerge(
-                "flex flex-col items-start p-4 rounded bg-white dark:bg-white/10 gap-4",
+                "flex flex-col items-start p-4 rounded bg-background-light dark:bg-background-dark gap-4",
                 "border border-slate-200 dark:border-white/10 border-solid w-full",
                 "relative",
                 "twui-paper",
diff --git a/components/lib/elements/Search.tsx b/components/lib/elements/Search.tsx
index 33a67d2..dca6430 100644
--- a/components/lib/elements/Search.tsx
+++ b/components/lib/elements/Search.tsx
@@ -39,7 +39,9 @@ export default function Search<KeyType extends string>({
     placeholder,
     ...props
 }: SearchProps<KeyType>) {
-    const [input, setInput] = React.useState("");
+    const [input, setInput] = React.useState(
+        props.defaultValue?.toString() || ""
+    );
 
     React.useEffect(() => {
         clearTimeout(timeout);
diff --git a/components/lib/elements/Tabs.tsx b/components/lib/elements/Tabs.tsx
index 8254450..42a3520 100644
--- a/components/lib/elements/Tabs.tsx
+++ b/components/lib/elements/Tabs.tsx
@@ -26,6 +26,7 @@ export type TWUI_TOGGLE_PROPS = React.ComponentProps<typeof Stack> & {
      */
     switchComponent?: ReactNode;
     setActiveValue?: React.Dispatch<React.SetStateAction<string | undefined>>;
+    changeHandler?: (value: TWUITabsObject) => void;
 };
 
 /**
@@ -43,6 +44,7 @@ export default function Tabs({
     debounce = 100,
     switchComponent,
     setActiveValue: existingSetActiveValue,
+    changeHandler,
     ...props
 }: TWUI_TOGGLE_PROPS) {
     const finalTabsContentArray = tabsContentArray
@@ -70,6 +72,9 @@ export default function Tabs({
 
     React.useEffect(() => {
         existingSetActiveValue?.(activeValue);
+        if (targetContent && activeValue) {
+            changeHandler?.(targetContent);
+        }
     }, [activeValue]);
 
     return (
diff --git a/components/lib/elements/Tag.tsx b/components/lib/elements/Tag.tsx
index 14e3dd8..ee4d385 100644
--- a/components/lib/elements/Tag.tsx
+++ b/components/lib/elements/Tag.tsx
@@ -51,7 +51,7 @@ export default function Tag({
                     ? "bg-orange-700 outline-orange-700"
                     : color == "gray"
                     ? twMerge(
-                          "bg-slate-100 outline-slate-200 dark:bg-white/10 dark:outline-white/20",
+                          "bg-slate-100 outline-slate-200 dark:bg-gray-dark dark:outline-gray-dark",
                           "text-slate-800 dark:text-white"
                       )
                     : "bg-primary text-white outline-primbg-primary twui-tag-primary",
diff --git a/components/lib/elements/ai/AIPromptActionSection.tsx b/components/lib/elements/ai/AIPromptActionSection.tsx
new file mode 100644
index 0000000..81b3617
--- /dev/null
+++ b/components/lib/elements/ai/AIPromptActionSection.tsx
@@ -0,0 +1,81 @@
+import { Send, X } from "lucide-react";
+import React, { Dispatch, SetStateAction } from "react";
+import { ChatCompletionMessageParam } from "openai/resources/index";
+import Row from "../../layout/Row";
+import Button from "../../layout/Button";
+import CopySlug from "../CopySlug";
+import AIPromptHistoryModal from "./AIPromptHistoryModal";
+
+type Props = {
+    streamRes: string;
+    setStreamRes: Dispatch<SetStateAction<string>>;
+    setPrompt: Dispatch<SetStateAction<string>>;
+    loading: boolean;
+    promptFn: (prompt: string) => void;
+    history: ChatCompletionMessageParam[];
+    prompt: string;
+    currentPromptRef: React.MutableRefObject<string>;
+    promptInputRef: React.RefObject<HTMLTextAreaElement>;
+};
+
+export default function AIPromptActionSection({
+    streamRes,
+    setStreamRes,
+    loading,
+    promptFn,
+    history,
+    prompt,
+    setPrompt,
+    currentPromptRef,
+    promptInputRef,
+}: Props) {
+    return (
+        <Row className="w-full justify-between">
+            <Row className="gap-4">
+                {streamRes.match(/./) && (
+                    <React.Fragment>
+                        <Button
+                            title="Clear AI Result"
+                            variant="ghost"
+                            size="smaller"
+                            color="gray"
+                            className="px-0"
+                            beforeIcon={<X size={20} />}
+                            onClick={() => {
+                                setStreamRes("");
+                            }}
+                        />
+                        <CopySlug
+                            slugText={streamRes}
+                            justIcon
+                            iconProps={{ size: 18 }}
+                            title="Copy Content"
+                        />
+                    </React.Fragment>
+                )}
+            </Row>
+            <Row>
+                <AIPromptHistoryModal history={history} />
+            </Row>
+            <Row>
+                <Button
+                    title="Send Prompt"
+                    beforeIcon={<Send size={20} />}
+                    loading={loading}
+                    className="p-2"
+                    onClick={() => {
+                        currentPromptRef.current = prompt;
+                        setTimeout(() => {
+                            setPrompt("");
+                            if (promptInputRef.current) {
+                                promptInputRef.current.value = "";
+                            }
+                        }, 200);
+                        promptFn(prompt);
+                    }}
+                    loadingProps={{ size: "smaller" }}
+                />
+            </Row>
+        </Row>
+    );
+}
diff --git a/components/lib/elements/ai/AIPromptBlock.tsx b/components/lib/elements/ai/AIPromptBlock.tsx
new file mode 100644
index 0000000..a612e6e
--- /dev/null
+++ b/components/lib/elements/ai/AIPromptBlock.tsx
@@ -0,0 +1,98 @@
+import { ChatCompletionMessageParam } from "openai/resources/index";
+import React from "react";
+import Paper from "../Paper";
+import Stack from "../../layout/Stack";
+import AIPromptPreview from "./AIPromptPreview";
+import LoadingOverlay from "../LoadingOverlay";
+import Textarea from "../../form/Textarea";
+import AIPromptActionSection from "./AIPromptActionSection";
+import Card from "../Card";
+import Row from "../../layout/Row";
+import Span from "../../layout/Span";
+import { MessageCircleMore } from "lucide-react";
+
+type Props = {
+    model?: string;
+    promptFn: (prompt: string) => void;
+    history?: ChatCompletionMessageParam[];
+    loading?: boolean;
+    mdRes?: string;
+    setMdRes: React.Dispatch<React.SetStateAction<string>>;
+};
+
+export default function AIPromptBlock({
+    model,
+    promptFn,
+    history = [],
+    loading = false,
+    mdRes = "",
+    setMdRes,
+}: Props) {
+    const [prompt, setPrompt] = React.useState("");
+    const currentPromptRef = React.useRef("");
+    const promptInputRef = React.useRef<HTMLTextAreaElement>(null);
+
+    return (
+        <Paper className="">
+            <Stack className="w-full">
+                {currentPromptRef.current && (
+                    <Row className="w-full justify-end">
+                        <Card className="py-1.5 px-2.5 text-xs">
+                            <Row>
+                                <Span>{currentPromptRef.current}</Span>
+                                <MessageCircleMore
+                                    size={15}
+                                    opacity={0.5}
+                                    className="-mt-[1px]"
+                                />
+                            </Row>
+                        </Card>
+                    </Row>
+                )}
+                <AIPromptPreview
+                    setStreamRes={setMdRes}
+                    streamRes={mdRes}
+                    history={history}
+                />
+                <Stack className="w-full relative">
+                    {loading && <LoadingOverlay />}
+                    <Textarea
+                        placeholder={model ? `Prompt ${model}` : "Prompt AI"}
+                        wrapperProps={{ className: "outline-none" }}
+                        wrapperWrapperProps={{ className: "w-full" }}
+                        value={prompt}
+                        onChange={(e) => {
+                            setPrompt(e.target.value);
+                        }}
+                        onKeyDown={(e) => {
+                            if (e.key == "Enter" && !e.ctrlKey) {
+                                e.preventDefault();
+                                currentPromptRef.current = prompt;
+                                setTimeout(() => {
+                                    setPrompt("");
+                                    if (promptInputRef.current) {
+                                        promptInputRef.current.value = "";
+                                    }
+                                }, 200);
+                                promptFn(prompt);
+                            }
+                        }}
+                        componentRef={promptInputRef}
+                        autoFocus
+                    />
+                    <AIPromptActionSection
+                        loading={loading}
+                        promptFn={promptFn}
+                        setStreamRes={setMdRes}
+                        streamRes={mdRes}
+                        history={history}
+                        prompt={prompt}
+                        setPrompt={setPrompt}
+                        currentPromptRef={currentPromptRef}
+                        promptInputRef={promptInputRef as any}
+                    />
+                </Stack>
+            </Stack>
+        </Paper>
+    );
+}
diff --git a/components/lib/elements/ai/AIPromptHistoryModal.tsx b/components/lib/elements/ai/AIPromptHistoryModal.tsx
new file mode 100644
index 0000000..074051d
--- /dev/null
+++ b/components/lib/elements/ai/AIPromptHistoryModal.tsx
@@ -0,0 +1,99 @@
+import React from "react";
+import { ChatCompletionMessageParam } from "openai/resources/index";
+import { twMerge } from "tailwind-merge";
+import { Bot, User } from "lucide-react";
+import Modal from "../Modal";
+import Button from "../../layout/Button";
+import Stack from "../../layout/Stack";
+import H2 from "../../layout/H2";
+import Span from "../../layout/Span";
+import Divider from "../../layout/Divider";
+import Row from "../../layout/Row";
+import Card from "../Card";
+import Border from "../Border";
+import MarkdownEditorPreviewComponent from "../../mdx/markdown/MarkdownEditorPreviewComponent";
+
+type Props = {
+    history: ChatCompletionMessageParam[];
+};
+
+export default function AIPromptHistoryModal({ history }: Props) {
+    if (!history[0]) return null;
+
+    return (
+        <Modal
+            target={
+                <Button
+                    title="View Chat History"
+                    size="smaller"
+                    color="gray"
+                    variant="outlined"
+                >
+                    View History
+                </Button>
+            }
+            className="max-w-[900px] bg-slate-100 dark:bg-white/5 xl:p-10"
+        >
+            <Stack className="gap-10 w-full">
+                <Stack className="gap-1">
+                    <H2 className="!text-xl m-0">Chat History</H2>
+                    <Span className="text-xs">
+                        AI chat history for this session.
+                    </Span>
+                </Stack>
+
+                <Divider />
+
+                {history.map((hst, index) => {
+                    if (hst.role == "user") {
+                        return (
+                            <Row
+                                key={index}
+                                className="w-full items-start justify-end"
+                            >
+                                <Card
+                                    className={twMerge(
+                                        "bg-background-dark text-foreground-dark dark:!bg-background-light dark:text-foreground-light"
+                                    )}
+                                >
+                                    {hst.content?.toString()}
+                                </Card>
+
+                                <Border className="w-10 h-10 rounded-full p-2 items-center justify-center">
+                                    <User />
+                                </Border>
+                            </Row>
+                        );
+                    }
+                    return (
+                        <Row
+                            key={index}
+                            className="w-full items-start flex-nowrap"
+                        >
+                            <Stack>
+                                <Border
+                                    className={twMerge(
+                                        "w-10 h-10 rounded-full items-center justify-center bg-white p-2",
+                                        "dark:bg-background-dark"
+                                    )}
+                                >
+                                    <Bot />
+                                </Border>
+                            </Stack>
+                            <Card className="grow overflow-x-auto xl:p-8">
+                                <MarkdownEditorPreviewComponent
+                                    value={hst.content?.toString() || ""}
+                                    maxHeight="none"
+                                    wrapperProps={{
+                                        className:
+                                            "border-none p-0 ai-response-content w-full",
+                                    }}
+                                />
+                            </Card>
+                        </Row>
+                    );
+                })}
+            </Stack>
+        </Modal>
+    );
+}
diff --git a/components/lib/elements/ai/AIPromptPreview.tsx b/components/lib/elements/ai/AIPromptPreview.tsx
new file mode 100644
index 0000000..1877a17
--- /dev/null
+++ b/components/lib/elements/ai/AIPromptPreview.tsx
@@ -0,0 +1,51 @@
+import Divider from "@/src/components/twui/layout/Divider";
+import Stack from "@/src/components/twui/layout/Stack";
+import React from "react";
+import MarkdownEditorPreviewComponent from "@/src/components/twui/mdx/markdown/MarkdownEditorPreviewComponent";
+import { ChatCompletionMessageParam } from "openai/resources/index";
+
+type Props = {
+    streamRes: string;
+    setStreamRes: React.Dispatch<React.SetStateAction<string>>;
+    history: ChatCompletionMessageParam[];
+};
+
+export default function AIPromptPreview({
+    setStreamRes,
+    streamRes,
+    history,
+}: Props) {
+    const responseContentRef = React.useRef<HTMLDivElement>(null);
+    const isContentInterrupted = React.useRef(false);
+
+    React.useEffect(() => {
+        if (isContentInterrupted.current) return;
+
+        if (responseContentRef.current) {
+            responseContentRef.current.scrollTop =
+                responseContentRef.current.scrollHeight;
+        }
+    }, [streamRes]);
+
+    if (!streamRes?.match(/./)) return null;
+
+    return (
+        <Stack className="w-full">
+            <MarkdownEditorPreviewComponent
+                value={streamRes}
+                maxHeight="40vh"
+                wrapperProps={{
+                    className: "border-none p-0 ai-response-content",
+                    componentRef: responseContentRef as any,
+                    onMouseEnter: () => {
+                        isContentInterrupted.current = true;
+                    },
+                    onMouseLeave: () => {
+                        isContentInterrupted.current = false;
+                    },
+                }}
+            />
+            <Divider />
+        </Stack>
+    );
+}
diff --git a/components/lib/form/Checkbox.tsx b/components/lib/form/Checkbox.tsx
index e13df4b..d2baed6 100644
--- a/components/lib/form/Checkbox.tsx
+++ b/components/lib/form/Checkbox.tsx
@@ -11,10 +11,14 @@ import Row from "../layout/Row";
 import { Info } from "lucide-react";
 import Span from "../layout/Span";
 
-export type CheckboxProps = React.DetailedHTMLProps<
-    React.HTMLAttributes<HTMLDivElement>,
-    HTMLDivElement
+export type CheckboxProps = Omit<
+    React.DetailedHTMLProps<
+        React.HTMLAttributes<HTMLDivElement>,
+        HTMLDivElement
+    >,
+    "title"
 > & {
+    title?: string | ReactNode;
     wrapperProps?: DetailedHTMLProps<
         HTMLAttributes<HTMLDivElement>,
         HTMLDivElement
@@ -29,6 +33,7 @@ export type CheckboxProps = React.DetailedHTMLProps<
     setChecked?: React.Dispatch<React.SetStateAction<boolean>>;
     checked?: boolean;
     readOnly?: boolean;
+    noLabel?: boolean;
     size?: number;
     changeHandler?: (value: boolean) => void;
     info?: string | ReactNode;
@@ -54,6 +59,8 @@ export default function Checkbox({
     changeHandler,
     info,
     wrapperWrapperProps,
+    noLabel,
+    title,
     ...props
 }: CheckboxProps) {
     const finalSize = size || 20;
@@ -62,8 +69,8 @@ export default function Checkbox({
         defaultChecked || externalChecked || false
     );
 
-    const finalTitle = props.title
-        ? props.title
+    const finalTitle = title
+        ? title
         : `Checkbox-${Math.round(Math.random() * 100000)}`;
 
     React.useEffect(() => {
@@ -112,17 +119,19 @@ export default function Checkbox({
                 >
                     {checked && <CheckMarkSVG />}
                 </div>
-                <Stack className="gap-0.5">
-                    <div
-                        {...labelProps}
-                        className={twMerge(
-                            "select-none whitespace-normal md:whitespace-nowrap",
-                            labelProps?.className
-                        )}
-                    >
-                        {label || finalTitle}
-                    </div>
-                </Stack>
+                {!noLabel && (
+                    <Stack className="gap-0.5">
+                        <div
+                            {...labelProps}
+                            className={twMerge(
+                                "select-none whitespace-normal md:whitespace-nowrap",
+                                labelProps?.className
+                            )}
+                        >
+                            {label || finalTitle}
+                        </div>
+                    </Stack>
+                )}
             </div>
             {info && (
                 <Row className="gap-1" title={info.toString()}>
diff --git a/components/lib/form/FileUpload.tsx b/components/lib/form/FileUpload.tsx
index f4daf26..3e9ff7e 100644
--- a/components/lib/form/FileUpload.tsx
+++ b/components/lib/form/FileUpload.tsx
@@ -12,12 +12,23 @@ import Row from "../layout/Row";
 import Input from "./Input";
 import Loading from "../elements/Loading";
 
+type FileInputUtils = {
+    clearFileInput?: () => void;
+};
+
 type ImageUploadProps = DetailedHTMLProps<
     React.HTMLAttributes<HTMLDivElement>,
     HTMLDivElement
 > & {
     onChangeHandler?: (
-        fileData: FileInputToBase64FunctionReturn | undefined
+        fileData: FileInputToBase64FunctionReturn | undefined,
+        inputRef?: React.RefObject<HTMLInputElement | null>,
+        utils?: FileInputUtils
+    ) => any;
+    changeHandler?: (
+        fileData: FileInputToBase64FunctionReturn | undefined,
+        inputRef?: React.RefObject<HTMLInputElement | null>,
+        utils?: FileInputUtils
     ) => any;
     onClear?: () => void;
     fileInputProps?: DetailedHTMLProps<
@@ -74,6 +85,7 @@ export default function FileUpload({
     loading,
     multiple,
     onClear,
+    changeHandler,
     ...props
 }: ImageUploadProps) {
     const [file, setFile] = React.useState<
@@ -98,6 +110,19 @@ export default function FileUpload({
         }
     }, [existingFile]);
 
+    function clearFileInput() {
+        setFile(undefined);
+        externalSetFile?.(undefined);
+        onChangeHandler?.(undefined);
+        changeHandler?.(undefined);
+        if (inputRef.current) {
+            inputRef.current.value = "";
+        }
+        onClear?.();
+    }
+
+    const fileInputUtils: FileInputUtils = { clearFileInput };
+
     return (
         <Stack
             {...props}
@@ -136,7 +161,12 @@ export default function FileUpload({
                             (res) => {
                                 setFile(res);
                                 externalSetFile?.(res);
-                                onChangeHandler?.(res);
+                                onChangeHandler?.(
+                                    res,
+                                    inputRef,
+                                    fileInputUtils
+                                );
+                                changeHandler?.(res, inputRef, fileInputUtils);
                                 fileInputProps?.onChange?.(e);
                             }
                         );
@@ -191,13 +221,7 @@ export default function FileUpload({
                                 "hover:bg-white dark:hover:bg-black"
                             )}
                             onClick={(e) => {
-                                setFile(undefined);
-                                externalSetFile?.(undefined);
-                                onChangeHandler?.(undefined);
-                                if (inputRef.current) {
-                                    inputRef.current.value = "";
-                                }
-                                onClear?.();
+                                clearFileInput();
                             }}
                             title="Cancel File Upload Button"
                         >
@@ -250,6 +274,7 @@ export default function FileUpload({
                             setFile(undefined);
                             externalSetFile?.(undefined);
                             onChangeHandler?.(undefined);
+                            changeHandler?.(undefined);
                             setFileUrl(undefined);
                         }}
                         title="Cancel File Button"
@@ -300,6 +325,7 @@ export default function FileUpload({
                                 setFile(res);
                                 externalSetFile?.(res);
                                 onChangeHandler?.(res);
+                                changeHandler?.(res);
                             }
                         );
                     }}
diff --git a/components/lib/form/Input/index.tsx b/components/lib/form/Input/index.tsx
index 91004c5..7ebf5fc 100644
--- a/components/lib/form/Input/index.tsx
+++ b/components/lib/form/Input/index.tsx
@@ -75,6 +75,10 @@ export type InputProps<KeyType extends string> = DetailedHTMLProps<
         info?: string | ReactNode;
         ready?: boolean;
         validity?: TWUISelectValidityObject;
+        clearInputProps?: React.DetailedHTMLProps<
+            React.HTMLAttributes<HTMLDivElement>,
+            HTMLDivElement
+        >;
     };
 
 let refreshes = 0;
@@ -114,6 +118,7 @@ export default function Input<KeyType extends string>(
         info,
         changeHandler,
         validity: existingValidity,
+        clearInputProps,
         ...props
     } = inputProps;
 
@@ -256,7 +261,7 @@ export default function Input<KeyType extends string>(
             }
             {...props}
             className={twMerge(
-                "w-full outline-none bg-transparent",
+                "w-full outline-none bg-transparent grow",
                 "twui-textarea",
                 props.className
             )}
@@ -285,7 +290,7 @@ export default function Input<KeyType extends string>(
                 "w-full outline-none bg-transparent border-none",
                 "hover:border-none hover:outline-none focus:border-none focus:outline-none",
                 "dark:bg-transparent dark:outline-none dark:border-none",
-                "p-0",
+                "p-0 grow",
                 "twui-input",
                 props.className
             )}
@@ -301,6 +306,7 @@ export default function Input<KeyType extends string>(
             onChange={handleValueChange}
             type={inputType}
             defaultValue={defaultInitialValue}
+            autoComplete={autoComplete}
             value={props.value ? getFinalValue(props.value) : undefined}
         />
     );
@@ -381,10 +387,12 @@ export default function Input<KeyType extends string>(
                 {props.type == "search" || props.readOnly ? null : (
                     <div
                         title="Clear Input Field"
+                        {...clearInputProps}
                         className={twMerge(
-                            "p-1 -my-2 -mx-1 opacity-0 cursor-pointer",
+                            "p-1 -my-2 -mx-1 opacity-0 cursor-pointer w-7 h-7",
                             "bg-background-light dark:bg-background-dark",
-                            "twui-clear-input-field-button"
+                            "twui-clear-input-field-button",
+                            clearInputProps?.className
                         )}
                         onClick={(e) => {
                             e.preventDefault();
@@ -397,9 +405,10 @@ export default function Input<KeyType extends string>(
                             }
 
                             updateValue("");
+                            clearInputProps?.onClick?.(e);
                         }}
                     >
-                        <X size={15} />
+                        <X className="w-full h-full" />
                     </div>
                 )}
 
diff --git a/components/lib/form/Radios.tsx b/components/lib/form/Radios.tsx
new file mode 100644
index 0000000..6b4f6e8
--- /dev/null
+++ b/components/lib/form/Radios.tsx
@@ -0,0 +1,79 @@
+import {
+    ComponentProps,
+    DetailedHTMLProps,
+    InputHTMLAttributes,
+    LabelHTMLAttributes,
+} from "react";
+import Row from "../layout/Row";
+import twuiSlugify from "../utils/slugify";
+import twuiSlugToNormalText from "../utils/slug-to-normal-text";
+import { twMerge } from "tailwind-merge";
+
+type Value = {
+    value: string;
+    title?: string;
+    default?: boolean;
+};
+
+export type TWUI_FORM_RADIO_PROPS = {
+    values: Value[];
+    name: string;
+    inputProps?: DetailedHTMLProps<
+        InputHTMLAttributes<HTMLInputElement>,
+        HTMLInputElement
+    >;
+    labelProps?: DetailedHTMLProps<
+        LabelHTMLAttributes<HTMLLabelElement>,
+        HTMLLabelElement
+    >;
+    wrapperProps?: ComponentProps<typeof Row>;
+    changeHandler?: (value: string) => void;
+};
+
+/**
+ * # Form Radios Component
+ * @className twui-textarea
+ */
+export default function Radios({
+    values,
+    name,
+    inputProps,
+    labelProps,
+    wrapperProps,
+    changeHandler,
+}: TWUI_FORM_RADIO_PROPS) {
+    const finalName = twuiSlugify(name);
+    const finalTitle = twuiSlugToNormalText(finalName);
+
+    return (
+        <Row
+            title={finalTitle}
+            {...wrapperProps}
+            className={twMerge("gap-4", wrapperProps?.className)}
+        >
+            {values.map((v, i) => {
+                const valueName = twuiSlugify(`${finalName}-${v.value}`);
+                const valueTitle = v.title || twuiSlugToNormalText(v.value);
+
+                return (
+                    <Row key={i} className="gap-1.5">
+                        <input
+                            id={valueName}
+                            type="radio"
+                            defaultChecked={v.default}
+                            name={finalName}
+                            onChange={(e) => {
+                                const targetValue = v.value;
+                                changeHandler?.(targetValue);
+                            }}
+                            {...inputProps}
+                        />
+                        <label htmlFor={valueName} {...labelProps}>
+                            {valueTitle}
+                        </label>
+                    </Row>
+                );
+            })}
+        </Row>
+    );
+}
diff --git a/components/lib/form/SearchSelect.tsx b/components/lib/form/SearchSelect.tsx
index d1415aa..9cb68bc 100644
--- a/components/lib/form/SearchSelect.tsx
+++ b/components/lib/form/SearchSelect.tsx
@@ -47,17 +47,23 @@ export default function SearchSelect<
     const [currentOptions, setCurrentOptions] =
         React.useState<TWUISelectOptionObject<KeyType, T>[]>(options);
 
-    const defaultOption = options.find((opt) => opt.default) || options[0];
+    const defaultOption = (options.find((opt) => opt.default) || options[0]) as
+        | TWUISelectOptionObject<KeyType, T>
+        | undefined;
 
     const [value, setValue] = React.useState<
-        TWUISelectOptionObject<KeyType, T>
-    >({
-        value: defaultOption.value,
-        data: defaultOption.data,
-    });
+        TWUISelectOptionObject<KeyType, T> | undefined
+    >(
+        defaultOption
+            ? {
+                  value: defaultOption?.value,
+                  data: defaultOption?.data,
+              }
+            : undefined
+    );
 
     const [inputValue, setInputValue] = React.useState<string>(
-        defaultOption.value
+        defaultOption?.value || ""
     );
     const [selectIndex, setSelectIndex] = React.useState<number | undefined>();
 
@@ -91,11 +97,14 @@ export default function SearchSelect<
     }, [open]);
 
     React.useEffect(() => {
-        dispatchState?.(value.data);
-        setInputValue(value.value);
+        if (value) {
+            dispatchState?.(value.data);
+            setInputValue(value.value);
+            changeHandler?.(value.value);
+        }
+
         clearTimeout(focusTimeout);
         setOpen(false);
-        changeHandler?.(value.value);
         setSelectIndex(undefined);
     }, [value]);
 
@@ -246,7 +255,7 @@ export default function SearchSelect<
                 targetWrapperProps={{ className: "w-full" }}
                 contentWrapperProps={{ className: "w-full" }}
                 className="w-full"
-                externalOpen={open}
+                externalOpen={currentOptions?.[0] && open}
             >
                 <Paper
                     className={twMerge(
@@ -255,37 +264,39 @@ export default function SearchSelect<
                     componentRef={contentWrapperRef}
                 >
                     <Stack className="w-full items-start gap-0">
-                        {currentOptions.map((_o, index) => {
-                            const isTargetOption = index === selectIndex;
-                            const targetOptionClasses = twMerge(
-                                "bg-background-dark dark:bg-background-light text-foreground-dark dark:text-foreground-light",
-                                "twui-select-target-option"
-                            );
+                        {currentOptions?.[0]
+                            ? currentOptions.map((_o, index) => {
+                                  const isTargetOption = index === selectIndex;
+                                  const targetOptionClasses = twMerge(
+                                      "bg-background-dark dark:bg-background-light text-foreground-dark dark:text-foreground-light",
+                                      "twui-select-target-option"
+                                  );
 
-                            return (
-                                <React.Fragment key={index}>
-                                    <Button
-                                        title={_o.title || "Option"}
-                                        variant="ghost"
-                                        onClick={(e) => {
-                                            e.preventDefault();
-                                            setValue(_o);
-                                            setOpen(false);
-                                        }}
-                                        className={twMerge(
-                                            "w-full text-foreground-light dark:text-foreground-dark",
-                                            "hover:bg-gray/20 dark:hover:bg-gray-dark/20",
-                                            isTargetOption
-                                                ? targetOptionClasses
-                                                : ""
-                                        )}
-                                    >
-                                        {_o.value}
-                                    </Button>
-                                    <Divider />
-                                </React.Fragment>
-                            );
-                        })}
+                                  return (
+                                      <React.Fragment key={index}>
+                                          <Button
+                                              title={_o.title || "Option"}
+                                              variant="ghost"
+                                              onClick={(e) => {
+                                                  e.preventDefault();
+                                                  setValue(_o);
+                                                  setOpen(false);
+                                              }}
+                                              className={twMerge(
+                                                  "w-full text-foreground-light dark:text-foreground-dark",
+                                                  "hover:bg-gray/20 dark:hover:bg-gray-dark/20",
+                                                  isTargetOption
+                                                      ? targetOptionClasses
+                                                      : ""
+                                              )}
+                                          >
+                                              {_o.value}
+                                          </Button>
+                                          <Divider />
+                                      </React.Fragment>
+                                  );
+                              })
+                            : null}
                     </Stack>
                 </Paper>
             </Dropdown>
diff --git a/components/lib/form/Select.tsx b/components/lib/form/Select.tsx
index 53e182e..3e6d53c 100644
--- a/components/lib/form/Select.tsx
+++ b/components/lib/form/Select.tsx
@@ -25,8 +25,8 @@ export type TWUISelectValidityObject = {
 };
 
 export type TWUISelectOptionObject<
-    KeyType extends string,
-    T extends { [k: string]: any } = any
+    KeyType extends string = string,
+    T extends { [k: string]: any } = { [k: string]: any }
 > = {
     title?: string;
     value: KeyType;
@@ -36,7 +36,7 @@ export type TWUISelectOptionObject<
 
 export type TWUISelectProps<
     KeyType extends string,
-    T extends { [k: string]: any } = any
+    T extends { [k: string]: any } = { [k: string]: any }
 > = DetailedHTMLProps<
     SelectHTMLAttributes<HTMLSelectElement>,
     HTMLSelectElement
@@ -168,6 +168,7 @@ export default function Select<
 
                 <select
                     id={selectID}
+                    aria-label={props["aria-label"] || props.title}
                     {...props}
                     className={twMerge(
                         "w-full pl-3 py-2 rounded-default appearance-none pr-8",
diff --git a/components/lib/hooks/useWebSocket.tsx b/components/lib/hooks/useWebSocket.tsx
index 847119c..734986d 100644
--- a/components/lib/hooks/useWebSocket.tsx
+++ b/components/lib/hooks/useWebSocket.tsx
@@ -73,7 +73,10 @@ export default function useWebSocket<
      * # Connect to Websocket
      */
     const connect = React.useCallback(() => {
-        const wsURL = url;
+        const domain = window.location.origin;
+        const wsURL = url.startsWith(`ws`)
+            ? url
+            : domain.replace(/^http/, "ws") + ("/" + url).replace(/\/\//g, "/");
         if (!wsURL) return;
 
         let ws = new WebSocket(wsURL);
diff --git a/components/lib/hooks/useWebSocketEventHandler.tsx b/components/lib/hooks/useWebSocketEventHandler.tsx
index c05952b..3c21c5a 100644
--- a/components/lib/hooks/useWebSocketEventHandler.tsx
+++ b/components/lib/hooks/useWebSocketEventHandler.tsx
@@ -18,9 +18,10 @@ export default function useWebSocketEventHandler<
         const dataEventListenerCallback = (e: Event) => {
             const customEvent = e as CustomEvent;
             const data = customEvent.detail.data as T | undefined;
-            const message = customEvent.detail.message as string | undefined;
+            const __msg = customEvent.detail.message as string | undefined;
+
             if (data) setData(data);
-            if (message) setMessage(message);
+            if (__msg && typeof __msg == "string") setMessage(__msg);
         };
 
         const messageEventName: (typeof WebSocketEventNames)[number] =
diff --git a/components/lib/layout/Img.tsx b/components/lib/layout/Img.tsx
index 708b7d5..e0f350e 100644
--- a/components/lib/layout/Img.tsx
+++ b/components/lib/layout/Img.tsx
@@ -1,5 +1,5 @@
 import _ from "lodash";
-import React, { DetailedHTMLProps, ImgHTMLAttributes } from "react";
+import React, { DetailedHTMLProps, ImgHTMLAttributes, ReactNode } from "react";
 import { twMerge } from "tailwind-merge";
 
 export type TWUIImageProps = DetailedHTMLProps<
@@ -14,13 +14,23 @@ export type TWUIImageProps = DetailedHTMLProps<
     fallbackImageSrc?: string;
     srcLight?: string;
     srcDark?: string;
+    imgErrSrc?: string;
+    imgErrComp?: ReactNode;
+    imgErrSrcLight?: string;
+    imgErrSrcDark?: string;
 };
 
 /**
  * # Image Component
  * @className twui-img
  */
-export default function Img({ ...props }: TWUIImageProps) {
+export default function Img({
+    imgErrSrc,
+    imgErrComp,
+    imgErrSrcDark,
+    imgErrSrcLight,
+    ...props
+}: TWUIImageProps) {
     const width = props.size || props.width;
     const height = props.size || props.height;
     const sizeRatio = width && height ? Number(width) / Number(height) : 1;
@@ -70,13 +80,16 @@ export default function Img({ ...props }: TWUIImageProps) {
 
     if (imageError) {
         return (
-            <img
-                loading="lazy"
-                {...interpolatedProps}
-                src={
-                    "https://static.datasquirel.com/images/user-images/user-2/castcord-image-preset_thumbnail.jpg"
-                }
-            />
+            imgErrComp || (
+                <img
+                    loading="lazy"
+                    {...interpolatedProps}
+                    src={
+                        imgErrSrc ||
+                        "https://static.datasquirel.com/images/user-images/user-2/castcord-image-preset_thumbnail.jpg"
+                    }
+                />
+            )
         );
     }
 
diff --git a/components/lib/mdx/mdx-components.tsx b/components/lib/mdx/mdx-components.tsx
index 32a95f0..17e3c3d 100644
--- a/components/lib/mdx/mdx-components.tsx
+++ b/components/lib/mdx/mdx-components.tsx
@@ -24,6 +24,7 @@ export function useMDXComponents(params?: Params) {
                 if (React.isValidElement(children) && children.props) {
                     return (
                         <CodeBlock {...props} backgroundColor={codeBgColor}>
+                            {/* @ts-ignore */}
                             {children.props.children}
                         </CodeBlock>
                     );
diff --git a/components/pages/Home/(data)/work.ts b/components/pages/Home/(data)/work.ts
index 86fdf66..867f17c 100644
--- a/components/pages/Home/(data)/work.ts
+++ b/components/pages/Home/(data)/work.ts
@@ -58,6 +58,21 @@ export const work = {
     Devops: {
         href: "/work/devops",
         portfolio: [
+            {
+                title: "TurboCI",
+                description: "Cloud VPS orchestrator that runs any workload",
+                href: "https://turboci.tben.me",
+                technologies: [
+                    "Bun",
+                    "Shell",
+                    "Typescript",
+                    "APIs",
+                    "Hetzner",
+                    "AWS",
+                    "GCP",
+                    "Azure",
+                ],
+            },
             {
                 title: "Personal Mail Server",
                 description:
@@ -81,7 +96,22 @@ export const work = {
         href: "/work/devops",
         portfolio: [
             {
-                title: "Turbo Sync NPM Module",
+                title: "TurboCI",
+                description: "Cloud VPS orchestrator that runs any workload",
+                href: "https://turboci.tben.me",
+                technologies: [
+                    "Bun",
+                    "Shell",
+                    "Typescript",
+                    "APIs",
+                    "Hetzner",
+                    "AWS",
+                    "GCP",
+                    "Azure",
+                ],
+            },
+            {
+                title: "Turbo Sync",
                 description:
                     "The easiest way to synchronize local and remote directories in real time",
                 href: "https://git.tben.me/Moduletrace/turbo-sync",