1/* eslint-disable @typescript-eslint/no-unused-vars */2"use client"34import { Chat } from "@/components/ui/chat";5import { AppSidebar } from "../components/app-sidebar"6import { Icon } from "@iconify/react";7import {8  Breadcrumb,9  BreadcrumbItem,10  BreadcrumbLink,11  BreadcrumbList,12  BreadcrumbPage,13  BreadcrumbSeparator,14} from "@/components/ui/breadcrumb"15import { Separator } from "@/components/ui/separator"16import { Form } from '@heroui/form';17import { Badge } from '@heroui/badge'18import { Button, Card, CardBody, CardFooter, CardHeader, Divider, Link } from '@heroui/react';19import Image from "next/image";20import { Input, Textarea } from '@heroui/input'21import { Avatar } from '@heroui/avatar';22import { Tooltip } from '@heroui/tooltip';23import ProseMirrorMarkdownEditor from "@/components/ProseMirrorMarkdownEditor";24import { SidebarInset, SidebarProvider, SidebarTrigger, useSidebar } from "@/components/ui/sidebar"25import { useChat } from "ai/react"26import { useSession } from "next-auth/react";27import { Spinner } from "@heroui/spinner"28import Cookies from "js-cookie";29import { useEffect, useState } from "react";30import { Logo, SideBarPhoneIcon, SideBarPhoneIcon2 } from "@/components/icons";31import SyntaxHighlighter from "react-syntax-highlighter";32import { dark } from "react-syntax-highlighter/dist/esm/styles/prism";33import ReactMarkdown from "react-markdown";34import remarkGfm from "remark-gfm";35import { ButtonGroup, Chip, Dropdown, DropdownItem, DropdownMenu, DropdownTrigger } from "@heroui/react";36import { useTheme } from "next-themes";37import Header from "@/components/Header";38import { toast } from "sonner";39import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard";4041export default function Page() {42  const {43    messages,44    input,45    handleInputChange,46    handleSubmit,47    append,48    reload,49    error,50    isLoading,51    stop,52  } = useChat()53  const session = useSession()54  const { open, toggleSidebar, isMobile } = useSidebar()55  const [selectedAi, setSelectedAi] = useState("DeepSeek R1")56  const { theme, setTheme } = useTheme();57  const savedTheme = Cookies.get("theme");58  const [copied, setcopy] = useState(false)59  const [src, setsrc] = useState("/LogoBlack.png")60  const handleCopy = (input: string) => {61    if(copied) return;62    navigator.clipboard.writeText(input)63      .then(() => {64        setcopy(true)65        setTimeout(() => {66          setcopy(false);67        }, 5000);68      })69      .catch((err) => {70        toast.error("Can't copy :(")71      });72  };7374  return (75    <>76      <AppSidebar />7778      <SidebarInset>79        <header className="flex h-16 shrink-0 sticky top-0 z-30 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12 border-b-small bg-white dark:bg-background dark:border-sidebar-border border-gray-200">80          <div className="flex items-center gap-2 px-4">81            {!isMobile ? (82              open ? null : (83                <>84                  <Button85                    isIconOnly86                    variant='light'87                    onPress={toggleSidebar}88                  >89                    {90                      isMobile ? <SideBarPhoneIcon2 size={25} /> : <Icon icon="solar:siderbar-outline" width={25} />91                    }92                  </Button>93                  <Divider orientation="vertical" className="mr-2 h-4" />94                </>95              )96            ) : (97              <>98                <Button99                  isIconOnly100                  variant='light'101                  onPress={toggleSidebar}102                >103                  {104                    isMobile ? <SideBarPhoneIcon2 size={25} /> : <Icon icon="solar:siderbar-outline" width={25} />105                  }106                </Button>107                <Separator orientation="vertical" className="mr-2 h-4" /></>108            )}109            <Dropdown>110              <DropdownTrigger>111                <Button className="sm:max-w-none max-w-24 text-foreground-400" startContent={<Icon icon="svg-spinners:blocks-scale" />} variant='light' >{selectedAi}</Button>112              </DropdownTrigger>113              <DropdownMenu aria-label="Example with disabled actions" selectedKeys={[selectedAi]}>114                <DropdownItem onSelect={() => setSelectedAi("Gemini")} endContent={<Chip size='sm' radius='lg' color='warning' className="text-[#C9A9E9] bg-[#643b8d]">Pro</Chip>} key="gemini">Gemini</DropdownItem>115                <DropdownItem onSelect={() => setSelectedAi("DeepSeek R1")} endContent={<Chip size='sm' radius='full' className="text-[#17C946] bg-[#17c94680]" color="success">New</Chip>} key="deepseek">DeepSeek R1</DropdownItem>116              </DropdownMenu>117            </Dropdown>118          </div>119        </header>120        {messages.length === 0 ? (121          <div id="scroll-auto">122            <div className="flex-grow flex flex-col items-center gap-4 justify-center min-h-[656px] pb-[5%]">123124              <div className="justify-start items-start">125                <Logo size={150} />126              </div>127              <div className="text-center">128                <h1 className="text-4xl font-bold ">Hi, I&apos;m EgyAI.</h1>129                <p className="text-xl text-gray-600 mt-4">How can I help you today?</p>130              </div>131              <div132                id="search-bar"133                className="relative w-full flex flex-col justify-center items-center gap-4"134              >135                <Textarea136                  className="max-w-[800px] flex flex-col justify-between w-full rounded-2xl border-medium px-3 py-2 pt-3 gap-1.5 hover:border-gray-400 transition-colors duration-200"137                  onChange={handleInputChange}138                  autoFocus139                  value={input}140                  placeholder="Ask EgyAI..."141                  onKeyDown={(e) => {142                    if (e.key === 'Enter' && !e.shiftKey) {143                      e.preventDefault();144                      handleSubmit();145                    }146                  }}147                  endContent={148                    <>149                      <Button size="sm" onPress={() => handleSubmit()} variant='light' fullWidth isIconOnly><Icon width={32} icon="solar:link-circle-bold" /></Button>150                      <Tooltip closeDelay={3} content={`${input.length === 0 ? "Empty Message" : ""}`}>151                        <div style={{ cursor: `${input.length === 0 ? 'not-allowed' : ""}` }}>152                          <Button isDisabled={input.length === 0} size="sm" onPress={() => (isLoading ? stop() : handleSubmit())} variant='light' fullWidth isIconOnly><Icon width={32} icon={isLoading ? "solar:stop-circle-bold" : "solar:round-arrow-up-bold"} /></Button>153                        </div>154                      </Tooltip>155                    </>156                  }157                  classNames={{158                    base: "border-none"159                  }}160                />161              </div>162            </div>163          </div>164        ) : (<>165          <div className="flex flex-col overflow-auto px-3 w-full mx-auto h-full justify-between">166            <div className="w-full md:max-w-4xl mx-auto pt-4 pb-2 px-4">167              <div className="flex gap-12">168                <div className="flex-grow flex flex-col gap-1 relative items-center max-w-full">169                  <div id="qa-container">170                    <div id="message" className="flex gap-12 flex-col min-h-0">171                      <div className="flex-grow flex flex-col gap-2">172                        <div className="flex-grow flex flex-col gap-2">173                          {messages.map(message => (174                            <div key={message.id} className="w-full">175                              {message.role === 'user' ?176                                <>177                                  <article178                                    className="w-full text-token-text-primary focus-visible:outline-2 focus-visible:outline-offset-[-4px]"179                                    dir="auto"180                                    data-testid="conversation-turn-2"181                                    data-scroll-anchor="false"182                                  >183                                    <h5 className="sr-only">User said:</h5>184                                    <div className="m-auto text-base py-[18px] px-6">185                                      <div className="mx-auto flex flex-1 gap-4 text-base md:gap-5 lg:gap-6 md:max-w-3xl lg:max-w-[40rem] xl:max-w-[48rem]">186                                        <div className="group/conversation-turn relative flex w-full min-w-0 flex-col @xs/thread:px-0 @sm/thread:px-1.5 @md/thread:px-4">187                                          <div className="flex-col gap-1 md:gap-3">188                                            <div className="flex max-w-full flex-col flex-grow">189                                              <div190                                                data-message-author-role="user"191                                                data-message-id={message.id}192                                                dir="auto"193                                                className="min-h-8 text-message overflow-x-hidden flex w-full flex-col items-end gap-2 whitespace-normal break-words text-start [.text-message+&]:mt-5"194                                              >195                                                <div className="flex w-full flex-col gap-1 empty:hidden items-end rtl:items-start">196                                                  <Card className="relative w-fit max-w-[70vw] sm:max-w-[70%] rounded-3xl px-5 py-2.5">197                                                    {message.content}198                                                  </Card>199                                                </div>200                                              </div>201                                            </div>202                                          </div>203                                        </div>204                                      </div>205                                    </div>206                                  </article>207                                  <div className="min-w-[70vw]" id="look-saver cuz i'm noob at frontend"></div>208                                </>209                                :210211                                <article212                                  className="w-full text-token-text-primary focus-visible:outline-2 focus-visible:outline-offset-[-4px]"213                                  dir="auto"214                                  data-testid="conversation-turn-3"215                                  data-scroll-anchor="true"216                                >217                                  <h6 className="sr-only">EgyAi said:</h6>218                                  <div className="m-auto text-base py-[18px] px-6">219                                    <div className="mx-auto flex flex-1 gap-4 text-base md:gap-5 lg:gap-6 md:max-w-3xl lg:max-w-[40rem] xl:max-w-[48rem]">220                                      <div className="group/conversation-turn relative flex w-full min-w-0 flex-col agent-turn @xs/thread:px-0 @sm/thread:px-1.5 @md/thread:px-4">221                                        <div className="flex-col gap-1 md:gap-3">222                                          <div className="flex max-w-full flex-col flex-grow">223                                            <div224                                              data-message-author-role="assistant"225                                              data-message-id={message.id}226                                              dir="auto"227                                              className="min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words text-start [.text-message+&]:mt-5"228                                              data-message-model-slug={selectedAi}229                                            >230                                                   <ProseMirrorMarkdownEditor initialMarkdown={message.content } />231232                                            </div>233                                          </div>234                                          <div className="mb-2 flex gap-3 empty:hidden -ml-2">235                                            <div className="items-center justify-start rounded-xl p-1 flex">236                                              <div className="flex items-center">237                                                <Tooltip content="SOON" placement='bottom' closeDelay={3}>238                                                  <Button disabled isIconOnly fullWidth size="sm" variant='light'><Icon width={23} icon="solar:volume-loud-linear" /></Button>239                                                </Tooltip>240                                                <Tooltip content="Copy" placement='bottom' closeDelay={3}>241                                                  <Button onPress={() => handleCopy(message.content)} isIconOnly fullWidth size="sm" variant='light'>{copied ? <Icon width={23} icon="solar:check-read-linear" /> : <Icon width={23} icon="solar:copy-linear" />}</Button>242                                                </Tooltip>243                                                <div className="flex">244                                                  <Tooltip content="Good response" placement='bottom' closeDelay={3}>245                                                    <Button disabled isIconOnly fullWidth size="sm" variant='light'><Icon width={23} icon="solar:like-linear" /></Button>246                                                  </Tooltip>247                                                  <Tooltip content="Bad response" placement='bottom' closeDelay={3}>248                                                    <Button disabled isIconOnly fullWidth size="sm" variant='light'><Icon width={23} icon="solar:dislike-linear" /></Button>249                                                  </Tooltip>250                                                </div>251                                                <span className="hidden" />252                                                <Tooltip content="Reload response" placement='bottom' closeDelay={3}>253                                                  <Button onPress={() => reload()} isIconOnly fullWidth size="sm" variant='light'><Icon width={23} icon="solar:refresh-linear" /></Button>254                                                </Tooltip>255                                              </div>256                                            </div>257                                          </div>258                                          <div className="pr-2 lg:pr-0" />259                                          <div className="mt-3 w-full empty:hidden">260                                            <div className="text-center" />261                                          </div>262                                        </div>263                                      </div>264                                    </div>265                                  </div>266                                </article>}267                            </div>268                          ))}269                        </div>270                      </div>271                    </div>272                  </div>273                </div>274              </div>275            </div>276277          </div>278          <div className="sticky bottom-0 mx-auto md:max-w-4xl flex justify-center z-30 w-full px-4 py-4 bg-background">279            <Textarea280              className="max-w-[800px] flex flex-col justify-between w-full rounded-2xl border-medium px-3 py-2 pt-3 gap-1.5 hover:border-gray-400 transition-colors duration-200"281              onChange={handleInputChange}282              autoFocus283              placeholder="Ask EgyAI..."284              value={input}285              onKeyDown={(e) => {286                if (e.key === 'Enter' && !e.shiftKey) {287                  e.preventDefault();288                  handleSubmit();289                }290              }}291              description="Keep in mind EgyAI can make mistakes,Check important information"292              endContent={293                <>294                  <Button size="sm" onPress={() => handleSubmit()} variant='light' fullWidth isIconOnly><Icon width={32} icon="solar:link-circle-bold" /></Button>295                  <Tooltip closeDelay={3} content={`${(isLoading ? false : input.length === 0) ? "Empty Message" : ""}`}>296                    <div style={{ cursor: `${(isLoading ? false : input.length === 0) ? 'not-allowed' : ""}` }}>297                      <Button isDisabled={(isLoading ? false : input.length === 0)} size="sm" onPress={() => (isLoading ? stop() : handleSubmit())} variant='light' fullWidth isIconOnly><Icon width={32} icon={isLoading ? "solar:stop-circle-bold" : "solar:round-arrow-up-bold"} /></Button>298                    </div>299                  </Tooltip>300                </>301              }302303              classNames={{304                description: "text-center",305                base: "border-none"306              }}307            />308          </div>309        </>)}310      </SidebarInset >311    </>312  )313}

1import React, { useEffect, useRef } from "react";2import { EditorState } from "prosemirror-state";3import { EditorView } from "prosemirror-view";4import { schema } from "prosemirror-schema-basic";5import { defaultMarkdownParser } from "prosemirror-markdown";6import hljs from "highlight.js"; // Import highlight.js7import "highlight.js/styles/github-dark.css"; // Choose any theme89// Function to apply syntax highlighting to code blocks10function addCodeHighlighting(view) {11  const codeBlocks = view.dom.querySelectorAll("pre code");12  codeBlocks.forEach((block) => {13    hljs.highlightElement(block); // Apply syntax highlighting14  });15}1617// Create a ProseMirror state18function createEditorState(markdownContent) {19  const doc = defaultMarkdownParser.parse(markdownContent);20  return EditorState.create({ doc });21}2223// React component for a read-only ProseMirror Markdown viewer24function ProseMirrorMarkdownViewer({ initialMarkdown }) {25  const editorRef = useRef(null);26  const viewRef = useRef(null);2728  useEffect(() => {29    // Initialize the editor30    const state = createEditorState(initialMarkdown);31    const view = new EditorView(editorRef.current, {32      state,33      dispatchTransaction(transaction) {34        const newState = view.state.apply(transaction);35        view.updateState(newState);36        addCodeHighlighting(view); // Highlight after updates37      },38      editable: () => false, // Disable editing39    });4041    viewRef.current = view;42    addCodeHighlighting(view); // Initial highlighting4344    // Cleanup on unmount45    return () => {46      view.destroy();47    };48  }, [initialMarkdown]);4950  return <div ref={editorRef} className="prosemirror-container" />;51}5253export default ProseMirrorMarkdownViewer;