diff --git a/README.md b/README.md index 5efb671..f39f749 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,7 @@ # Page Assist [![Join dialoqbase #welcome](https://img.shields.io/badge/discord-join%20chat-blue.svg)](https://discord.gg/bu54382uBd) +[![Twitter Follow](https://img.shields.io/twitter/follow/page_assist?style=social)](https://twitter.com/page_assist) Page Assist is an open-source browser extension that provides a sidebar and web UI for your local AI model. It allows you to interact with your model from any webpage. ## Installation diff --git a/src/assets/tailwind.css b/src/assets/tailwind.css index ee4b772..1ef50b0 100644 --- a/src/assets/tailwind.css +++ b/src/assets/tailwind.css @@ -13,6 +13,12 @@ @tailwind base; @tailwind components; @tailwind utilities; +@layer utilities { + .mask-bottom-fade { + mask-image: linear-gradient(0deg, transparent 0, #000 160px); + -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 160px); + } +} diff --git a/src/components/Common/Playground/Message.tsx b/src/components/Common/Playground/Message.tsx index ff03fe2..4cc54ea 100644 --- a/src/components/Common/Playground/Message.tsx +++ b/src/components/Common/Playground/Message.tsx @@ -52,8 +52,8 @@ export const PlaygroundMessage = (props: Props) => { const { t } = useTranslation("common") const { cancel, isSpeaking, speak } = useTTS() return ( -
-
+
+ {/*
*/}
@@ -197,12 +197,12 @@ export const PlaygroundMessage = (props: Props) => {
{props.isTTSEnabled && ( @@ -213,7 +213,7 @@ export const PlaygroundMessage = (props: Props) => { cancel() } else { speak({ - utterance: removeReasoning(props.message), + utterance: removeReasoning(props.message) }) } }} @@ -292,7 +292,7 @@ export const PlaygroundMessage = (props: Props) => { )}
-
+ {/*
*/}
) } diff --git a/src/components/Layouts/Header.tsx b/src/components/Layouts/Header.tsx index 48020ad..f65946e 100644 --- a/src/components/Layouts/Header.tsx +++ b/src/components/Layouts/Header.tsx @@ -89,9 +89,10 @@ export const Header: React.FC = ({ } } + return (
diff --git a/src/components/Layouts/Layout.tsx b/src/components/Layouts/Layout.tsx index 3a6b6b8..622ed6c 100644 --- a/src/components/Layouts/Layout.tsx +++ b/src/components/Layouts/Layout.tsx @@ -36,72 +36,75 @@ export default function OptionLayout({ const { setSystemPrompt } = useStoreChatModelSettings() return ( - <> -
-
-
{children}
-
+
+
+
+
+
+ {/*
*/} + {children} + {/*
*/} + + {t("sidebarTitle")} - - {t("sidebarTitle")} - - - - -
- } - placement="left" - closeIcon={null} - onClose={() => setSidebarOpen(false)} - open={sidebarOpen}> - + + + +
+ } + placement="left" + closeIcon={null} onClose={() => setSidebarOpen(false)} - setMessages={setMessages} - setHistory={setHistory} - setHistoryId={setHistoryId} - setSelectedModel={setSelectedModel} - setSelectedSystemPrompt={setSelectedSystemPrompt} - clearChat={clearChat} - historyId={historyId} - setSystemPrompt={setSystemPrompt} - temporaryChat={temporaryChat} - history={history} - /> - + open={sidebarOpen}> + setSidebarOpen(false)} + setMessages={setMessages} + setHistory={setHistory} + setHistoryId={setHistoryId} + setSelectedModel={setSelectedModel} + setSelectedSystemPrompt={setSelectedSystemPrompt} + clearChat={clearChat} + historyId={historyId} + setSystemPrompt={setSystemPrompt} + temporaryChat={temporaryChat} + history={history} + /> + - - + + +
) } diff --git a/src/components/Option/Playground/Playground.tsx b/src/components/Option/Playground/Playground.tsx index 4dee398..371b9b5 100644 --- a/src/components/Option/Playground/Playground.tsx +++ b/src/components/Option/Playground/Playground.tsx @@ -11,6 +11,8 @@ import { } from "@/db" import { getLastUsedChatSystemPrompt } from "@/services/model-settings" import { useStoreChatModelSettings } from "@/store/model" +import { useSmartScroll } from "@/hooks/useSmartScroll" +import { ChevronDown } from "lucide-react" export const Playground = () => { const drop = React.useRef(null) @@ -21,9 +23,14 @@ export const Playground = () => { setHistoryId, setHistory, setMessages, - setSelectedSystemPrompt + setSelectedSystemPrompt, + streaming } = useMessageOption() const { setSystemPrompt } = useStoreChatModelSettings() + const { containerRef, isAtBottom, scrollToBottom } = useSmartScroll( + messages, + streaming + ) const [dropState, setDropState] = React.useState< "idle" | "dragging" | "error" @@ -125,23 +132,25 @@ export const Playground = () => { return (
- - -
-
-
-
-
-
- -
-
-
+
+ +
+
+ {!isAtBottom && ( +
+
-
+ )} +
) diff --git a/src/components/Option/Playground/PlaygroundChat.tsx b/src/components/Option/Playground/PlaygroundChat.tsx index 44cd16c..2c057ed 100644 --- a/src/components/Option/Playground/PlaygroundChat.tsx +++ b/src/components/Option/Playground/PlaygroundChat.tsx @@ -3,8 +3,6 @@ import { useMessageOption } from "~/hooks/useMessageOption" import { PlaygroundEmpty } from "./PlaygroundEmpty" import { PlaygroundMessage } from "~/components/Common/Playground/Message" import { MessageSourcePopup } from "@/components/Common/Playground/MessageSourcePopup" -import { useSmartScroll } from "~/hooks/useSmartScroll" -import { ChevronDown } from "lucide-react" export const PlaygroundChat = () => { const { @@ -18,18 +16,11 @@ export const PlaygroundChat = () => { const [isSourceOpen, setIsSourceOpen] = React.useState(false) const [source, setSource] = React.useState(null) - const { containerRef, isAtBottom, scrollToBottom } = useSmartScroll( - messages, - streaming - ) - return ( <> -
+
{messages.length === 0 && ( -
+
)} @@ -59,19 +50,9 @@ export const PlaygroundChat = () => { reasoningTimeTaken={message?.reasoning_time_taken} /> ))} - {messages.length > 0 && ( -
- )}
- {!isAtBottom && ( -
- -
- )} +
+ { } return ( -
-
-
- Uploaded Image - -
-
-
-
-
{ - stopListening() - if (!selectedModel || selectedModel.length === 0) { - form.setFieldError("message", t("formError.noModel")) - return - } - if (webSearch) { - const defaultEM = await defaultEmbeddingModelForRag() - if (!defaultEM) { - form.setFieldError("message", t("formError.noEmbeddingModel")) - return - } - } - if ( - value.message.trim().length === 0 && - value.image.length === 0 - ) { - return - } - form.reset() - textAreaFocus() - await sendMessage({ - image: value.image, - message: value.message.trim() - }) - })} - className="shrink-0 flex-grow flex flex-col items-center "> - -
-