Skip to content

Commit

Permalink
Add proper titles and metadata to Chat and Materials page. Show Proje…
Browse files Browse the repository at this point in the history 
…ctName - UIUC.chat
  • Loading branch information
@KastanDay
KastanDay committed Jun 24, 2024
1 parent 73fbe23 commit 7a2c667
Show file tree
Hide file tree
Showing 3 changed files with 147 additions and 137 deletions.
278 changes: 146 additions & 132 deletions src/components/Chat/Chat.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,7 @@ import handleTools, {
import { useFetchEnabledDocGroups } from '~/hooks/docGroupsQueries'
import Link from 'next/link'
import { CropwizardLicenseDisclaimer } from '~/pages/cropwizard-licenses'
import Head from 'next/head'

const montserrat_med = Montserrat({
weight: '500',
Expand Down Expand Up @@ -1000,76 +1001,27 @@ export const Chat = memo(({ stopConversationRef, courseMetadata }: Props) => {
)

return (
<div className="overflow-wrap relative flex h-screen w-full flex-col overflow-hidden bg-white dark:bg-[#15162c]">
<div className="justify-center" style={{ height: '40px' }}>
<ChatNavbar bannerUrl={bannerUrl as string} isgpt4={true} />
</div>
<div className="mt-10 flex-grow overflow-auto">
{!(apiKey || serverSideApiKeyIsSet) ? (
<div className="absolute inset-0 mt-20 flex flex-col items-center justify-center">
<div className="backdrop-filter-[blur(10px)] rounded-box mx-auto max-w-4xl flex-col items-center border border-2 border-[rgba(255,165,0,0.8)] bg-[rgba(42,42,64,0.3)] p-10 text-2xl font-bold text-black dark:text-white">
<div className="mb-2 flex flex-col items-center text-center">
<IconAlertTriangle
size={'54'}
className="mr-2 block text-orange-400 "
/>
<div className="mt-4 text-left text-gray-100">
{' '}
{t(
'Please set your OpenAI API key in the bottom left of the screen.',
)}
<div className="mt-2 font-normal">
<Text size={'md'} className="text-gray-100">
If you don&apos;t have a key yet, you can get one here:{' '}
<a
href="https://platform.openai.com/account/api-keys"
target="_blank"
rel="noreferrer"
className="text-purple-500 hover:underline"
>
OpenAI API key{' '}
<IconExternalLink
className="mr-2 inline-block"
style={{ position: 'relative', top: '-3px' }}
/>
</a>
</Text>
<Text size={'md'} className="pt-10 text-gray-400">
<IconLock className="mr-2 inline-block" />
This key will live securely encrypted in your
browser&apos;s cache. It&apos;s all client-side so our
servers never see it.
</Text>
<Text size={'md'} className="pt-10 text-gray-400">
<IconBrain className="mr-2 inline-block" />
GPT 3.5 is default. For GPT-4 access, either complete one
billing cycle as an OpenAI API customer or pre-pay a
minimum of $0.50. See
<a
className="text-purple-500 hover:underline"
href="https://help.openai.com/en/articles/7102672-how-can-i-access-gpt-4"
target="_blank"
rel="noreferrer"
>
{' '}
this documentation for details{' '}
<IconExternalLink
className="mr-2 inline-block"
style={{ position: 'relative', top: '-3px' }}
/>
</a>
</Text>
<Text size={'md'} className="pt-10 text-gray-400">
<IconCreditCard className="mr-2 inline-block" />
You only pay the standard OpenAI prices, per token read or
generated by the model.
</Text>
</div>
</div>
<div className="absolute bottom-4 left-0 animate-ping flex-col place-items-start text-left">
<IconArrowLeft
size={'36'}
className="transform text-purple-500 transition-transform duration-500 ease-in-out hover:-translate-x-1"
<>
<Head>
<title>{getCurrentPageName()} - UIUC.chat</title>
<meta
name="description"
content="The AI teaching assistant built for students at UIUC."
/>
<link rel="icon" href="/favicon.ico" />
</Head>
<div className="overflow-wrap relative flex h-screen w-full flex-col overflow-hidden bg-white dark:bg-[#15162c]">
<div className="justify-center" style={{ height: '40px' }}>
<ChatNavbar bannerUrl={bannerUrl as string} isgpt4={true} />
</div>
<div className="mt-10 flex-grow overflow-auto">
{!(apiKey || serverSideApiKeyIsSet) ? (
<div className="absolute inset-0 mt-20 flex flex-col items-center justify-center">
<div className="backdrop-filter-[blur(10px)] rounded-box mx-auto max-w-4xl flex-col items-center border border-2 border-[rgba(255,165,0,0.8)] bg-[rgba(42,42,64,0.3)] p-10 text-2xl font-bold text-black dark:text-white">
<div className="mb-2 flex flex-col items-center text-center">
<IconAlertTriangle
size={'54'}
className="mr-2 block text-orange-400 "
/>
<div className="mt-4 text-left text-gray-100">
{' '}
Expand Down Expand Up @@ -1124,77 +1076,139 @@ export const Chat = memo(({ stopConversationRef, courseMetadata }: Props) => {
</Text>
</div>
</div>
<div className="absolute bottom-4 left-0 ml-4 mt-4 animate-ping flex-col place-items-start text-left">
<div className="absolute bottom-4 left-0 animate-ping flex-col place-items-start text-left">
<IconArrowLeft
size={'36'}
className="mr-2 transform text-purple-500 transition-transform duration-500 ease-in-out hover:-translate-x-1"
className="transform text-purple-500 transition-transform duration-500 ease-in-out hover:-translate-x-1"
/>
<div className="mt-4 text-left text-gray-100">
{' '}
{t(
'Please set your OpenAI API key in the bottom left of the screen.',
)}
<div className="mt-2 font-normal">
<Text size={'md'} className="text-gray-100">
If you don&apos;t have a key yet, you can get one
here:{' '}
<a
href="https://platform.openai.com/account/api-keys"
target="_blank"
rel="noreferrer"
className="text-purple-500 hover:underline"
>
OpenAI API key{' '}
<IconExternalLink
className="mr-2 inline-block"
style={{ position: 'relative', top: '-3px' }}
/>
</a>
</Text>
<Text size={'md'} className="pt-10 text-gray-400">
<IconLock className="mr-2 inline-block" />
This key will live securely encrypted in your
browser&apos;s cache. It&apos;s all client-side so our
servers never see it.
</Text>
<Text size={'md'} className="pt-10 text-gray-400">
<IconBrain className="mr-2 inline-block" />
GPT 3.5 is default. For GPT-4 access, either complete
one billing cycle as an OpenAI API customer or pre-pay
a minimum of $0.50. See
<a
className="text-purple-500 hover:underline"
href="https://help.openai.com/en/articles/7102672-how-can-i-access-gpt-4"
target="_blank"
rel="noreferrer"
>
{' '}
this documentation for details{' '}
<IconExternalLink
className="mr-2 inline-block"
style={{ position: 'relative', top: '-3px' }}
/>
</a>
</Text>
<Text size={'md'} className="pt-10 text-gray-400">
<IconCreditCard className="mr-2 inline-block" />
You only pay the standard OpenAI prices, per token
read or generated by the model.
</Text>
</div>
</div>
<div className="absolute bottom-4 left-0 ml-4 mt-4 animate-ping flex-col place-items-start text-left">
<IconArrowLeft
size={'36'}
className="mr-2 transform text-purple-500 transition-transform duration-500 ease-in-out hover:-translate-x-1"
/>
</div>
</div>
</div>
</div>
</div>
</div>
) : modelError ? (
<ErrorMessageDiv error={modelError} />
) : (
<>
<div
className="mt-4 max-h-full"
ref={chatContainerRef}
onScroll={handleScroll}
>
{selectedConversation?.messages.length === 0 ? (
<>
<div className="mt-16">{renderIntroductoryStatements()}</div>
</>
) : (
<>
{selectedConversation?.messages.map((message, index) => (
<MemoizedChatMessage
key={index}
message={message}
contentRenderer={renderMessageContent}
messageIndex={index}
onEdit={(editedMessage) => {
// setCurrentMessage(editedMessage)
handleSend(
editedMessage,
selectedConversation?.messages.length - index,
null,
tools,
enabledDocumentGroups,
)
}}
onImageUrlsUpdate={onImageUrlsUpdate}
) : modelError ? (
<ErrorMessageDiv error={modelError} />
) : (
<>
<div
className="mt-4 max-h-full"
ref={chatContainerRef}
onScroll={handleScroll}
>
{selectedConversation?.messages.length === 0 ? (
<>
<div className="mt-16">
{renderIntroductoryStatements()}
</div>
</>
) : (
<>
{selectedConversation?.messages.map((message, index) => (
<MemoizedChatMessage
key={index}
message={message}
contentRenderer={renderMessageContent}
messageIndex={index}
onEdit={(editedMessage) => {
// setCurrentMessage(editedMessage)
handleSend(
editedMessage,
selectedConversation?.messages.length - index,
null,
tools,
enabledDocumentGroups,
)
}}
onImageUrlsUpdate={onImageUrlsUpdate}
/>
))}
{loading && <ChatLoader />}
<div
className="h-[162px] bg-gradient-to-t from-transparent to-[rgba(14,14,21,0.4)]"
ref={messagesEndRef}
/>
))}
{loading && <ChatLoader />}
<div
className="h-[162px] bg-gradient-to-t from-transparent to-[rgba(14,14,21,0.4)]"
ref={messagesEndRef}
/>
</>
)}
</div>
{/* <div className="w-full max-w-[calc(100% - var(--sidebar-width))] mx-auto flex justify-center"> */}
<ChatInput
stopConversationRef={stopConversationRef}
textareaRef={textareaRef}
onSend={(message, plugin) => {
// setCurrentMessage(message)
handleSend(message, 0, plugin, tools, enabledDocumentGroups)
}}
onScrollDownClick={handleScrollDown}
onRegenerate={handleRegenerate}
showScrollDownButton={showScrollDownButton}
inputContent={inputContent}
setInputContent={setInputContent}
courseName={getCurrentPageName()}
/>
</>
)}
</>
)}
</div>
{/* <div className="w-full max-w-[calc(100% - var(--sidebar-width))] mx-auto flex justify-center"> */}
<ChatInput
stopConversationRef={stopConversationRef}
textareaRef={textareaRef}
onSend={(message, plugin) => {
// setCurrentMessage(message)
handleSend(message, 0, plugin, tools, enabledDocumentGroups)
}}
onScrollDownClick={handleScrollDown}
onRegenerate={handleRegenerate}
showScrollDownButton={showScrollDownButton}
inputContent={inputContent}
setInputContent={setInputContent}
courseName={getCurrentPageName()}
/>
</>
)}
</div>
</div>
</div>
</>
)
Chat.displayName = 'Chat'
})
Expand Down
3 changes: 1 addition & 2 deletions src/components/UIUC-Components/MakeOldCoursePage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,13 +81,12 @@ const MakeOldCoursePage = ({
<Navbar course_name={course_name} bannerUrl={bannerUrl} />

<Head>
<title>{course_name}</title>
<title>{course_name} - Admin page - UIUC.chat</title>
<meta
name="description"
content="The AI teaching assistant built for students at UIUC."
/>
<link rel="icon" href="/favicon.ico" />
{/* <Header /> */}
</Head>
<main className="course-page-main min-w-screen flex min-h-screen flex-col items-center">
<div className="items-left flex w-full flex-col justify-center py-0">
Expand Down
3 changes: 0 additions & 3 deletions src/pages/[course_name]/materials.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,7 @@ import { CannotEditGPT4Page } from '~/components/UIUC-Components/CannotEditGPT4'
import { LoadingSpinner } from '~/components/UIUC-Components/LoadingSpinner'
import { MainPageBackground } from '~/components/UIUC-Components/MainPageBackground'
import { AuthComponent } from '~/components/UIUC-Components/AuthToEditCourse'
import { Title } from '@mantine/core'
import { extractEmailsFromClerk } from '~/components/UIUC-Components/clerkHelpers'
import { montserrat_heading } from 'fonts'
import Navbar from '~/components/UIUC-Components/navbars/Navbar'
import { CourseMetadata } from '~/types/courseMetadata'
import { fetchCourseMetadata } from '~/utils/apiUtils'

Expand Down

0 comments on commit 7a2c667

Please sign in to comment.