chatbox offset display + chatbox header select css fix

Author: code-forge-temple

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "scribe-pal",
-    "version": "1.2.0",
+    "version": "1.3.0",
     "description": "ScribePal is an intelligent browser extension that leverages AI to empower your web experience.",
     "author": "Code Forge Temple",
     "type": "module",

package.json

@@ -45,12 +45,20 @@ const ROLE = {
     ASSISTANT: "assistant"
 } as const;
 
-type ChatBoxProps = ChatBoxIds & { onRemove: () => void };
+type ChatBoxProps = ChatBoxIds & {
+    onRemove: () => void;
+    coordsOffset: number;
+};
 
-export const ChatBox = withShadowStyles(({tabId, chatBoxId, onRemove}: ChatBoxProps) => {
+export const ChatBox = withShadowStyles(({tabId, chatBoxId, onRemove, coordsOffset}: ChatBoxProps) => {
     const boxRef = useRef<HTMLDivElement>(null);
     const [isVisible, setIsVisible] = useState(false);
-    const [position, setPosition, handleDrag] = useDraggablePosition({tabId, chatBoxId}, {left: "calc(100% - 600px)", top: "210px"});
+    const [position, setPosition, handleDrag] = useDraggablePosition(
+        {tabId, chatBoxId},
+        {
+            left:  `calc(100% - 600px - ${30 * coordsOffset}px)`,
+            top: `calc(210px + ${30 * coordsOffset}px)`
+        });
     const [message, setMessage] = usePersistentState<string>("chatBoxMessage", "", {tabId, chatBoxId});
     const {chatLog, setChatLog} = useChatLog({tabId, chatBoxId});
     const [selectedModel, setSelectedModel] = usePersistentState<string>("chatBoxSelectedModel", "", {tabId, chatBoxId});

src/tab/components/ChatBox/ChatBox.tsx

@@ -18,6 +18,10 @@
             cursor: pointer;
             padding: 0 5px 0 5px;
             width: auto;
+            max-width: 150px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
 
             option {
                 color: black;

src/tab/components/ChatBox/components/ChatHeader/ChatHeader.scss

@@ -11,7 +11,7 @@ import {ChatBox} from "../../../components/ChatBox";
 import {ShadowContext}from "../../../contexts/ShadowContext";
 import {App} from "../../../components/App";
 
-export function showChat (tabId: number, chatBoxId: string): void {
+export function showChat (tabId: number, chatBoxId: string, coordsOffset: number): void {
 
     const host = document.createElement("div");
     const shadow = host.attachShadow({mode: "closed"});
@@ -36,7 +36,7 @@ export function showChat (tabId: number, chatBoxId: string): void {
     root.render(
         <ShadowContext.Provider value={shadow}>
             <App>
-                <ChatBox chatBoxId={chatBoxId} tabId={tabId} onRemove={handleRemove} />
+                <ChatBox chatBoxId={chatBoxId} tabId={tabId} onRemove={handleRemove} coordsOffset={coordsOffset} />
             </App>
         </ShadowContext.Provider>
     );

src/tab/features/chat/actions/showChat.tsx

@@ -208,33 +208,33 @@ const actionShowChat = async () => {
 
     if (!tabId) return;
 
-    if (await isScriptInjected(tabId)) {
-        await showChat(tabId, chatBoxId);
-    } else {
+    if (!(await isScriptInjected(tabId))) {
         await polyfillScriptingExecuteScript({
             target: {tabId},
             files: ["injectedScript.js"],
         });
-
-        await showChat(tabId, chatBoxId);
     }
+
+    await showChat(tabId, chatBoxId);
 }
 
 const showChat = async (tabId: number, chatBoxId: string) => {
     const chatIsShown = await isChatShown(tabId, chatBoxId);
+    const tabStorage = await getTabStorage(tabId);
+    const chatBoxesCount = Object.keys(tabStorage.chatBoxes).length;
 
     if (!chatIsShown) {
         await polyfillScriptingExecuteScript({
             target: {tabId},
-            func: (extensionName: string, tabId: number, chatBoxId: string) => {
+            func: (extensionName: string, tabId: number, chatBoxId: string, chatBoxesCount: number) => {
                 const extensionNamespace = (window as any)[extensionName];
 
-                extensionNamespace.showChat(tabId, chatBoxId);
+                extensionNamespace.showChat(tabId, chatBoxId, chatBoxesCount);
 
                 extensionNamespace.shownChatBoxes[chatBoxId] = true;
 
             },
-            args: [EXTENSION_NAME, tabId, chatBoxId],
+            args: [EXTENSION_NAME, tabId, chatBoxId, chatBoxesCount],
         });
     }
 }