diff --git a/package.json b/package.json index 3616dc6..8f54ffd 100644 --- a/package.json +++ b/package.json @@ -22,9 +22,10 @@ "axios": "^1.6.7", "langchain": "^0.1.9", "plasmo": "0.84.1", + "property-information": "^6.4.1", "react": "18.2.0", "react-dom": "18.2.0", - "react-markdown": "8.0.7", + "react-markdown": "8.0.0", "react-router-dom": "6.10.0", "react-syntax-highlighter": "^15.5.0", "react-toastify": "^10.0.4", @@ -73,6 +74,23 @@ "scripting", "declarativeNetRequest", "declarativeNetRequestFeedback" - ] + ], + "commands": { + "open-ai-sidebar": { + "suggested_key": { + "default": "Ctrl+Shift+0", + "mac": "Command+Shift+0" + }, + "description": "Open AI Sidebar for Page Assist" + }, + "_execute_action": { + "suggested_key": { + "windows": "Ctrl+Shift+0", + "mac": "Command+Shift+0", + "chromeos": "Ctrl+Shift+0", + "linux": "Ctrl+Shift+0" + } + } + } } -} \ No newline at end of file +} diff --git a/src/background.ts b/src/background.ts index df87041..281cbf1 100644 --- a/src/background.ts +++ b/src/background.ts @@ -4,7 +4,7 @@ chrome.runtime.onMessage.addListener(async (message) => { chrome.tabs.query({ active: true, currentWindow: true }, async (tabs) => { const tab = tabs[0] await chrome.sidePanel.open({ - windowId: tab.windowId + tabId: tab.id, }) }) }) diff --git a/src/components/Common/Markdown.tsx b/src/components/Common/Markdown.tsx index c3da731..688c6f2 100644 --- a/src/components/Common/Markdown.tsx +++ b/src/components/Common/Markdown.tsx @@ -4,9 +4,10 @@ import { nightOwl } from "react-syntax-highlighter/dist/cjs/styles/prism" import rehypeMathjax from "rehype-mathjax" import remarkMath from "remark-math" import ReactMarkdown from "react-markdown" -import { ClipboardIcon, CheckIcon, EyeIcon } from "@heroicons/react/24/outline" +import "property-information" +import { ClipboardIcon, CheckIcon } from "@heroicons/react/24/outline" import React from "react" -import { Tooltip } from "antd" +import { Tooltip } from "antd" export default function Markdown({ message }: { message: string }) { const [isBtnPressed, setIsBtnPressed] = React.useState(false) @@ -23,8 +24,8 @@ export default function Markdown({ message }: { message: string }) {
-
+ { + props.isBot && ( + + {props.name} + + ) + }
diff --git a/src/components/Sidepanel/body.tsx b/src/components/Sidepanel/body.tsx index 0ee421c..b17d2b3 100644 --- a/src/components/Sidepanel/body.tsx +++ b/src/components/Sidepanel/body.tsx @@ -19,6 +19,7 @@ export const SidePanelBody = () => { key={index} isBot={message.isBot} message={message.message} + name={message.name} /> ))}
diff --git a/src/components/Sidepanel/empty.tsx b/src/components/Sidepanel/empty.tsx index 4f2706a..1f606dd 100644 --- a/src/components/Sidepanel/empty.tsx +++ b/src/components/Sidepanel/empty.tsx @@ -97,7 +97,7 @@ export const EmptySidePanel = () => { 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"> + className="bg-gray-100 truncate w-full dark:bg-black dark:text-gray-100 rounded-md px-4 py-2 mt-2"> {ollamaInfo.models.map((model) => ( diff --git a/src/components/Sidepanel/form.tsx b/src/components/Sidepanel/form.tsx index a058019..397f05f 100644 --- a/src/components/Sidepanel/form.tsx +++ b/src/components/Sidepanel/form.tsx @@ -1,15 +1,11 @@ import { useForm } from "@mantine/form" import { useMutation } from "@tanstack/react-query" import React from "react" +import useDynamicTextareaSize from "~hooks/useDynamicTextareaSize" import { useMessage } from "~hooks/useMessage" export const SidepanelForm = () => { const textareaRef = React.useRef(null) - React.useEffect(() => { - if (textareaRef.current) { - textareaRef.current.focus() - } - }, []) const resetHeight = () => { const textarea = textareaRef.current @@ -23,6 +19,11 @@ export const SidepanelForm = () => { } }) + useDynamicTextareaSize( + textareaRef, + form.values.message, + ) + const { onSubmit, selectedModel } = useMessage() const { mutateAsync: sendMessage, isPending: isSending } = useMutation({ @@ -44,7 +45,7 @@ export const SidepanelForm = () => { await sendMessage(value.message) })} className="shrink-0 flex-grow flex items-center "> -
+