v2 initial commit
This commit is contained in:
n4ze3m
28
src/components/Sidepanel/body.tsx
Normal file
28
src/components/Sidepanel/body.tsx
Normal file
@@ -0,0 +1,28 @@
|
||||
import React from "react"
|
||||
import { PlaygroundMessage } from "~components/Common/Playground/Message"
|
||||
import { useMessage } from "~hooks/useMessage"
|
||||
import { EmptySidePanel } from "./empty"
|
||||
|
||||
export const SidePanelBody = () => {
|
||||
const { messages } = useMessage()
|
||||
const divRef = React.useRef<HTMLDivElement>(null)
|
||||
React.useEffect(() => {
|
||||
if (divRef.current) {
|
||||
divRef.current.scrollIntoView({ behavior: "smooth" })
|
||||
}
|
||||
})
|
||||
return (
|
||||
<div className="grow flex flex-col md:translate-x-0 transition-transform duration-300 ease-in-out">
|
||||
{messages.length === 0 && <EmptySidePanel />}
|
||||
{messages.map((message, index) => (
|
||||
<PlaygroundMessage
|
||||
key={index}
|
||||
isBot={message.isBot}
|
||||
message={message.message}
|
||||
/>
|
||||
))}
|
||||
<div className="w-full h-32 md:h-48 flex-shrink-0"></div>
|
||||
<div ref={divRef} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
111
src/components/Sidepanel/empty.tsx
Normal file
111
src/components/Sidepanel/empty.tsx
Normal file
@@ -0,0 +1,111 @@
|
||||
import { useQuery } from "@tanstack/react-query"
|
||||
import { useEffect, useState } from "react"
|
||||
import { useMessage } from "~hooks/useMessage"
|
||||
import {
|
||||
fetchModels,
|
||||
getOllamaURL,
|
||||
isOllamaRunning,
|
||||
setOllamaURL as saveOllamaURL
|
||||
} from "~services/ollama"
|
||||
|
||||
export const EmptySidePanel = () => {
|
||||
const [ollamaURL, setOllamaURL] = useState<string>("")
|
||||
const {
|
||||
data: ollamaInfo,
|
||||
status: ollamaStatus,
|
||||
refetch,
|
||||
isRefetching
|
||||
} = useQuery({
|
||||
queryKey: ["ollamaStatus"],
|
||||
queryFn: async () => {
|
||||
const ollamaURL = await getOllamaURL()
|
||||
const isOk = await isOllamaRunning()
|
||||
const models = await fetchModels()
|
||||
|
||||
return {
|
||||
isOk,
|
||||
models,
|
||||
ollamaURL
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
if (ollamaInfo?.ollamaURL) {
|
||||
setOllamaURL(ollamaInfo.ollamaURL)
|
||||
}
|
||||
}, [ollamaInfo])
|
||||
|
||||
const { setSelectedModel, selectedModel } = useMessage()
|
||||
|
||||
return (
|
||||
<div className="mx-auto sm:max-w-md px-4 mt-10">
|
||||
<div className="rounded-lg justify-center items-center flex flex-col border p-8 bg-white dark:bg-black shadow-sm">
|
||||
{(ollamaStatus === "pending" || isRefetching) && (
|
||||
<div className="inline-flex items-center space-x-2">
|
||||
<div className="w-3 h-3 bg-blue-500 rounded-full animate-bounce"></div>
|
||||
<p className="dark:text-gray-400 text-gray-900">
|
||||
Searching for your Ollama 🦙
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
{!isRefetching && ollamaStatus === "success" ? (
|
||||
ollamaInfo.isOk ? (
|
||||
<div className="inline-flex items-center space-x-2">
|
||||
<div className="w-3 h-3 bg-green-500 rounded-full"></div>
|
||||
<p className="dark:text-gray-400 text-gray-900">
|
||||
Ollama is running 🦙
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col space-y-2 justify-center items-center">
|
||||
<div className="inline-flex space-x-2">
|
||||
<div className="w-3 h-3 bg-red-500 rounded-full"></div>
|
||||
<p className="dark:text-gray-400 text-gray-900">
|
||||
We couldn't find your Ollama 🦙
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<input
|
||||
className="bg-gray-100 dark:bg-black dark:text-gray-100 rounded-md px-4 py-2 mt-2 w-full"
|
||||
type="url"
|
||||
value={ollamaURL}
|
||||
onChange={(e) => setOllamaURL(e.target.value)}
|
||||
/>
|
||||
|
||||
<button
|
||||
onClick={() => {
|
||||
saveOllamaURL(ollamaURL)
|
||||
refetch()
|
||||
}}
|
||||
className="bg-blue-500 mt-4 hover:bg-blue-600 text-white px-4 py-2 rounded-md">
|
||||
Retry
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
) : null}
|
||||
|
||||
{ollamaStatus === "success" && ollamaInfo.isOk && (
|
||||
<div className="mt-4">
|
||||
<p className="dark:text-gray-400 text-gray-900">Models:</p>
|
||||
|
||||
<select
|
||||
onChange={(e) => {
|
||||
if (e.target.value === "") {
|
||||
return
|
||||
}
|
||||
setSelectedModel(e.target.value)
|
||||
}}
|
||||
value={selectedModel}
|
||||
className="bg-gray-100 w-full dark:bg-black dark:text-gray-100 rounded-md px-4 py-2 mt-2">
|
||||
<option value={""}>Select a model</option>
|
||||
{ollamaInfo.models.map((model) => (
|
||||
<option value={model.name}>{model.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
102
src/components/Sidepanel/form.tsx
Normal file
102
src/components/Sidepanel/form.tsx
Normal file
@@ -0,0 +1,102 @@
|
||||
import { useForm } from "@mantine/form"
|
||||
import { useMutation } from "@tanstack/react-query"
|
||||
import React from "react"
|
||||
import { useMessage } from "~hooks/useMessage"
|
||||
|
||||
export const SidepanelForm = () => {
|
||||
const textareaRef = React.useRef<HTMLTextAreaElement>(null)
|
||||
React.useEffect(() => {
|
||||
if (textareaRef.current) {
|
||||
textareaRef.current.focus()
|
||||
}
|
||||
}, [])
|
||||
|
||||
const resetHeight = () => {
|
||||
const textarea = textareaRef.current
|
||||
if (textarea) {
|
||||
textarea.style.height = "auto"
|
||||
}
|
||||
}
|
||||
const form = useForm({
|
||||
initialValues: {
|
||||
message: ""
|
||||
}
|
||||
})
|
||||
|
||||
const { onSubmit, selectedModel } = useMessage()
|
||||
|
||||
const { mutateAsync: sendMessage, isPending: isSending } = useMutation({
|
||||
mutationFn: onSubmit
|
||||
})
|
||||
|
||||
return (
|
||||
<div className="p-3 md:p-6 md:bg-white dark:bg-[#0a0a0a] border rounded-t-xl border-black/10 dark:border-gray-900/50">
|
||||
<div className="flex-grow space-y-6 ">
|
||||
<div className="flex">
|
||||
<form
|
||||
onSubmit={form.onSubmit(async (value) => {
|
||||
if (!selectedModel || selectedModel.length === 0) {
|
||||
form.setFieldError("message", "Please select a model")
|
||||
return
|
||||
}
|
||||
form.reset()
|
||||
resetHeight()
|
||||
await sendMessage(value.message)
|
||||
})}
|
||||
className="shrink-0 flex-grow flex items-center ">
|
||||
<div className="flex items-center p-2 rounded-full border bg-gray-100 w-full dark:bg-black dark:border-gray-800">
|
||||
<textarea
|
||||
disabled={isSending}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" && !e.shiftKey && !isSending) {
|
||||
e.preventDefault()
|
||||
form.onSubmit(async (value) => {
|
||||
if (value.message.trim().length === 0) {
|
||||
return
|
||||
}
|
||||
if (!selectedModel || selectedModel.length === 0) {
|
||||
form.setFieldError("message", "Please select a model")
|
||||
return
|
||||
}
|
||||
form.reset()
|
||||
resetHeight()
|
||||
await sendMessage(value.message)
|
||||
})()
|
||||
}
|
||||
}}
|
||||
ref={textareaRef}
|
||||
className="rounded-full pl-4 pr-2 py-2 w-full resize-none bg-transparent focus-within:outline-none sm:text-sm focus:ring-0 focus-visible:ring-0 ring-0 dark:ring-0 border-0 dark:text-gray-100"
|
||||
required
|
||||
rows={1}
|
||||
tabIndex={0}
|
||||
placeholder="Type a message..."
|
||||
{...form.getInputProps("message")}
|
||||
/>
|
||||
<button
|
||||
disabled={isSending || form.values.message.length === 0}
|
||||
className="mx-2 flex items-center justify-center w-10 h-10 text-white bg-black rounded-xl disabled:opacity-50">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="h-6 w-6"
|
||||
viewBox="0 0 24 24">
|
||||
<path d="M9 10L4 15 9 20"></path>
|
||||
<path d="M20 4v7a4 4 0 01-4 4H4"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{form.errors.message && (
|
||||
<div className="text-red-500 text-center text-sm mt-1">
|
||||
{form.errors.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
26
src/components/Sidepanel/header.tsx
Normal file
26
src/components/Sidepanel/header.tsx
Normal file
@@ -0,0 +1,26 @@
|
||||
import logoImage from "data-base64:~assets/icon.png"
|
||||
import CogIcon from "@heroicons/react/24/outline/CogIcon"
|
||||
import { ArrowPathIcon } from "@heroicons/react/24/outline"
|
||||
import { useMessage } from "~hooks/useMessage"
|
||||
export const SidepanelHeader = () => {
|
||||
const { clearChat } = useMessage()
|
||||
return (
|
||||
<div className="flex px-3 justify-between bg-white dark:bg-black border-b border-gray-200 dark:border-gray-800 py-4 items-center">
|
||||
<div className="focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-700 flex items-center dark:text-white">
|
||||
<img className="h-6 w-auto" src={logoImage} alt="Page Assist" />
|
||||
<span className="ml-1 text-sm ">Page Assist</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-3">
|
||||
<button
|
||||
onClick={() => {
|
||||
clearChat()
|
||||
}}
|
||||
className="flex items-center space-x-1 focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-700">
|
||||
<ArrowPathIcon className="h-5 w-5 text-gray-500 dark:text-gray-400" />
|
||||
</button>
|
||||
<CogIcon className="h-5 w-5 text-gray-500 dark:text-gray-400" />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user