feat: enhance code block functionality

- Implement sending code to terminal

Author: DepsCian

frontend/app/element/markdown.scss

@@ -125,22 +125,31 @@
             }
 
             .codeblock-actions {
-                visibility: hidden;
-                display: flex;
                 position: absolute;
-                top: 0;
-                right: 0;
+                top: 5px;
+                right: 5px;
+                display: flex;
+                gap: 4px;
+                opacity: 0;
+                transition: opacity 0.1s ease-in-out;
+                background-color: rgba(0, 0, 0, 0.2);
+                backdrop-filter: blur(2px);
                 border-radius: 4px;
-                backdrop-filter: blur(8px);
-                margin: 0.143em;
-                padding: 0.286em;
-                align-items: center;
-                justify-content: flex-end;
-                gap: 0.286em;
+                padding: 2px 4px;
+
+                .iconbutton {
+                    font-size: 14px;
+                    padding: 3px;
+                    border-radius: 3px;
+
+                    &:hover {
+                        background-color: rgba(255, 255, 255, 0.1);
+                    }
+                }
             }
 
             &:hover .codeblock-actions {
-                visibility: visible;
+                opacity: 1;
             }
         }
 

frontend/app/element/markdown.tsx

@@ -9,7 +9,10 @@ import {
     resolveSrcSet,
     transformBlocks,
 } from "@/app/element/markdown-util";
-import { boundNumber, useAtomValueSafe } from "@/util/util";
+import { ContextMenuModel as contextMenuModel } from "@/app/store/contextmenu";
+import { RpcApi } from "@/app/store/wshclientapi";
+import { TabRpcClient } from "@/app/store/wshrpcutil";
+import { boundNumber, stringToBase64, useAtomValueSafe } from "@/util/util";
 import { clsx } from "clsx";
 import { Atom } from "jotai";
 import { OverlayScrollbarsComponent, OverlayScrollbarsComponentRef } from "overlayscrollbars-react";
@@ -21,7 +24,7 @@ import rehypeSanitize, { defaultSchema } from "rehype-sanitize";
 import rehypeSlug from "rehype-slug";
 import RemarkFlexibleToc, { TocItem } from "remark-flexible-toc";
 import remarkGfm from "remark-gfm";
-import { openLink } from "../store/global";
+import { atoms, getAllBlockComponentModels, globalStore, openLink } from "../store/global";
 import { IconButton } from "./iconbutton";
 import "./markdown.scss";
 
@@ -91,6 +94,64 @@ const CodeBlock = ({ children, onClickExecute }: CodeBlockProps) => {
         }
     };
 
+    const handleSendToTerminal = async (e: React.MouseEvent) => {
+        let textToSend = getTextContent(children);
+        textToSend = textToSend.replace(/\n$/, "");
+
+        const allBCMs = getAllBlockComponentModels();
+        const terminalBlocks = [];
+
+        for (const bcm of allBCMs) {
+            if (bcm?.viewModel?.viewType === "term") {
+                terminalBlocks.push({
+                    id: (bcm.viewModel as any).blockId || "",
+                    title: `Terminal ${terminalBlocks.length + 1}`,
+                });
+            }
+        }
+
+        const menuItems: ContextMenuItem[] = terminalBlocks.map((terminal) => ({
+            label: terminal.title,
+            click: () => sendTextToTerminal(terminal.id, textToSend),
+        }));
+
+        menuItems.push({ type: "separator" });
+        menuItems.push({
+            label: "Create New Terminal",
+            click: async () => {
+                const termBlockDef = {
+                    meta: {
+                        controller: "shell",
+                        view: "term",
+                    },
+                };
+                try {
+                    const tabId = globalStore.get(atoms.staticTabId);
+                    const oref = await RpcApi.CreateBlockCommand(TabRpcClient, {
+                        tabid: tabId,
+                        blockdef: termBlockDef,
+                    });
+
+                    const blockId = oref.split(":")[1];
+                    setTimeout(() => sendTextToTerminal(blockId, textToSend), 500);
+                } catch (error) {
+                    console.error("Failed to create new terminal block:", error);
+                }
+            },
+        });
+
+        contextMenuModel.showContextMenu(menuItems, e);
+    };
+
+    const sendTextToTerminal = (blockId: string, text: string) => {
+        const textWithReturn = text + "\n";
+        const b64data = stringToBase64(textWithReturn);
+        RpcApi.ControllerInputCommand(TabRpcClient, {
+            blockid: blockId,
+            inputdata64: b64data,
+        });
+    };
+
     return (
         <pre className="codeblock">
             {children}
@@ -105,6 +166,14 @@ const CodeBlock = ({ children, onClickExecute }: CodeBlockProps) => {
                         }}
                     />
                 )}
+                <IconButton
+                    decl={{
+                        elemtype: "iconbutton",
+                        icon: "regular@terminal",
+                        click: handleSendToTerminal,
+                        title: "Send to Terminal",
+                    }}
+                />
             </div>
         </pre>
     );

frontend/app/element/typingindicator.scss

@@ -48,7 +48,7 @@
         transform: translateY(0);
     }
     50% {
-        transform: translateY(-5px);
+        transform: translateY(-2.5px);
         opacity: 1;
     }
 }

frontend/app/view/waveai/waveai.tsx

@@ -190,98 +190,6 @@ export class WaveAiModel implements ViewModel {
             return opts;
         });
 
-        this.viewText = atom((get) => {
-            const viewTextChildren: HeaderElem[] = [];
-            const aiOpts = get(this.aiOpts);
-            const presets = get(this.presetMap);
-            const presetKey = get(this.presetKey);
-            const presetName = presets[presetKey]?.["display:name"] ?? "";
-            const isCloud = isBlank(aiOpts.apitoken) && isBlank(aiOpts.baseurl);
-
-            // Handle known API providers
-            switch (aiOpts?.apitype) {
-                case "anthropic":
-                    viewTextChildren.push({
-                        elemtype: "iconbutton",
-                        icon: "globe",
-                        title: `Using Remote Anthropic API (${aiOpts.model})`,
-                        noAction: true,
-                    });
-                    break;
-                case "perplexity":
-                    viewTextChildren.push({
-                        elemtype: "iconbutton",
-                        icon: "globe",
-                        title: `Using Remote Perplexity API (${aiOpts.model})`,
-                        noAction: true,
-                    });
-                    break;
-                default:
-                    if (isCloud) {
-                        viewTextChildren.push({
-                            elemtype: "iconbutton",
-                            icon: "cloud",
-                            title: "Using Wave's AI Proxy (gpt-4o-mini)",
-                            noAction: true,
-                        });
-                    } else {
-                        const baseUrl = aiOpts.baseurl ?? "OpenAI Default Endpoint";
-                        const modelName = aiOpts.model;
-                        if (baseUrl.startsWith("http://localhost") || baseUrl.startsWith("http://127.0.0.1")) {
-                            viewTextChildren.push({
-                                elemtype: "iconbutton",
-                                icon: "location-dot",
-                                title: `Using Local Model @ ${baseUrl} (${modelName})`,
-                                noAction: true,
-                            });
-                        } else {
-                            viewTextChildren.push({
-                                elemtype: "iconbutton",
-                                icon: "globe",
-                                title: `Using Remote Model @ ${baseUrl} (${modelName})`,
-                                noAction: true,
-                            });
-                        }
-                    }
-            }
-
-            const dropdownItems = Object.entries(presets)
-                .sort((a, b) => ((a[1]["display:order"] ?? 0) > (b[1]["display:order"] ?? 0) ? 1 : -1))
-                .map(
-                    (preset) =>
-                        ({
-                            label: preset[1]["display:name"],
-                            onClick: () =>
-                                fireAndForget(() =>
-                                    ObjectService.UpdateObjectMeta(WOS.makeORef("block", this.blockId), {
-                                        "ai:preset": preset[0],
-                                    })
-                                ),
-                        }) as MenuItem
-                );
-            dropdownItems.push({
-                label: "Add AI preset...",
-                onClick: () => {
-                    fireAndForget(async () => {
-                        const path = `${getApi().getConfigDir()}/presets/ai.json`;
-                        const blockDef: BlockDef = {
-                            meta: {
-                                view: "preview",
-                                file: path,
-                            },
-                        };
-                        await createBlock(blockDef, false, true);
-                    });
-                },
-            });
-            viewTextChildren.push({
-                elemtype: "menubutton",
-                text: presetName,
-                title: "Select AI Configuration",
-                items: dropdownItems,
-            });
-            return viewTextChildren;
-        });
         this.endIconButtons = atom((_) => {
             let clearButton: IconButtonDecl = {
                 elemtype: "iconbutton",