1
/* eslint-disable @typescript-eslint/no-unused-vars */
2
"use client"
3

4
import { Chat } from "@/components/ui/chat";
5
import { AppSidebar } from "../components/app-sidebar"
6
import { Icon } from "@iconify/react";
7
import {
8
  Breadcrumb,
9
  BreadcrumbItem,
10
  BreadcrumbLink,
11
  BreadcrumbList,
12
  BreadcrumbPage,
13
  BreadcrumbSeparator,
14
} from "@/components/ui/breadcrumb"
15
import { Separator } from "@/components/ui/separator"
16
import { Form } from '@heroui/form';
17
import { Badge } from '@heroui/badge'
18
import { Button, Card, CardBody, CardFooter, CardHeader, Divider, Link } from '@heroui/react';
19
import Image from "next/image";
20
import { Input, Textarea } from '@heroui/input'
21
import { Avatar } from '@heroui/avatar';
22
import { Tooltip } from '@heroui/tooltip';
23
import ProseMirrorMarkdownEditor from "@/components/ProseMirrorMarkdownEditor";
24
import { SidebarInset, SidebarProvider, SidebarTrigger, useSidebar } from "@/components/ui/sidebar"
25
import { useChat } from "ai/react"
26
import { useSession } from "next-auth/react";
27
import { Spinner } from "@heroui/spinner"
28
import Cookies from "js-cookie";
29
import { useEffect, useState } from "react";
30
import { Logo, SideBarPhoneIcon, SideBarPhoneIcon2 } from "@/components/icons";
31
import SyntaxHighlighter from "react-syntax-highlighter";
32
import { dark } from "react-syntax-highlighter/dist/esm/styles/prism";
33
import ReactMarkdown from "react-markdown";
34
import remarkGfm from "remark-gfm";
35
import { ButtonGroup, Chip, Dropdown, DropdownItem, DropdownMenu, DropdownTrigger } from "@heroui/react";
36
import { useTheme } from "next-themes";
37
import Header from "@/components/Header";
38
import { toast } from "sonner";
39
import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard";
40

41
export 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
  };
73

74
  return (
75
    <>
76
      <AppSidebar />
77

78
      <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
                  <Button
85
                    isIconOnly
86
                    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
                <Button
99
                  isIconOnly
100
                  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%]">
123

124
              <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
              <div
132
                id="search-bar"
133
                className="relative w-full flex flex-col justify-center items-center gap-4"
134
              >
135
                <Textarea
136
                  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
                  autoFocus
139
                  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
                                  <article
178
                                    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
                                              <div
190
                                                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
                                :
210

211
                                <article
212
                                  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
                                            <div
224
                                              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 } />
231

232
                                            </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>
276

277
          </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
            <Textarea
280
              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
              autoFocus
283
              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
              }
302

303
              classNames={{
304
                description: "text-center",
305
                base: "border-none"
306
              }}
307
            />
308
          </div>
309
        </>)}
310
      </SidebarInset >
311
    </>
312
  )
313
}

1
import React, { useEffect, useRef } from "react";
2
import { EditorState } from "prosemirror-state";
3
import { EditorView } from "prosemirror-view";
4
import { schema } from "prosemirror-schema-basic";
5
import { defaultMarkdownParser } from "prosemirror-markdown";
6
import hljs from "highlight.js"; // Import highlight.js
7
import "highlight.js/styles/github-dark.css"; // Choose any theme
8

9
// Function to apply syntax highlighting to code blocks
10
function addCodeHighlighting(view) {
11
  const codeBlocks = view.dom.querySelectorAll("pre code");
12
  codeBlocks.forEach((block) => {
13
    hljs.highlightElement(block); // Apply syntax highlighting
14
  });
15
}
16

17
// Create a ProseMirror state
18
function createEditorState(markdownContent) {
19
  const doc = defaultMarkdownParser.parse(markdownContent);
20
  return EditorState.create({ doc });
21
}
22

23
// React component for a read-only ProseMirror Markdown viewer
24
function ProseMirrorMarkdownViewer({ initialMarkdown }) {
25
  const editorRef = useRef(null);
26
  const viewRef = useRef(null);
27

28
  useEffect(() => {
29
    // Initialize the editor
30
    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 updates
37
      },
38
      editable: () => false, // Disable editing
39
    });
40

41
    viewRef.current = view;
42
    addCodeHighlighting(view); // Initial highlighting
43

44
    // Cleanup on unmount
45
    return () => {
46
      view.destroy();
47
    };
48
  }, [initialMarkdown]);
49

50
  return <div ref={editorRef} className="prosemirror-container" />;
51
}
52

53
export default ProseMirrorMarkdownViewer;