button stories

.storybook/global.css

@@ -1,6 +1,7 @@
 body {
     height: 100vh;
     padding: 0;
+    overflow: auto;
 }
 
 #storybook-root {

.storybook/preview.tsx

@@ -3,6 +3,9 @@ import type { Preview } from "@storybook/react";
 import React from "react";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
+import "../frontend/app/theme.less";
+import "../frontend/app/app.less";
+import "../frontend/app/reset.less";
 import "./global.css";
 
 const preview: Preview = {

RELEASES.md

@@ -1,5 +1,12 @@
 # Building for release
 
+## Temporary instructions while waiting on GitHub support
+
+1. On the `wave8` branch, run `task version -- <none, patch, minor, major> <false, true>` based on the options mentioned in step 2 of the [Step-by-step guide](#step-by-step-guide).
+2. Commit and push the changes to the `wave8` branch.
+3. Manually create a tag named `v<version>` attached to `origin/wave8`. Push the tag to GitHub.
+4. This should kick off the build as normal and create a draft release when done. Continue from step 4 of the [Step-by-step guide](#step-by-step-guide).
+
 ## Step-by-step guide
 
 1. Go to the [Actions tab](https://github.com/wavetermdev/waveterm/actions) and select "Bump Version" from the left sidebar.

frontend/app/block/block.tsx

@@ -14,7 +14,7 @@ import {
     unregisterBlockComponentModel,
 } from "@/store/global";
 import * as WOS from "@/store/wos";
-import { getElemAsStr } from "@/util/focusutil";
+import { focusedBlockId, getElemAsStr } from "@/util/focusutil";
 import * as util from "@/util/util";
 import { CpuPlotView, CpuPlotViewModel, makeCpuPlotViewModel } from "@/view/cpuplot/cpuplot";
 import { HelpView, HelpViewModel, makeHelpViewModel } from "@/view/helpview/helpview";
@@ -159,12 +159,11 @@ const BlockFull = React.memo(({ nodeModel, viewModel }: FullBlockProps) => {
             return;
         }
         setBlockClicked(false);
-        const focusWithin = blockRef.current?.contains(document.activeElement);
+        const focusWithin = focusedBlockId() == nodeModel.blockId;
         if (!focusWithin) {
             setFocusTarget();
         }
         if (!isFocused) {
-            console.log("blockClicked focus", nodeModel.blockId);
             nodeModel.focusNode();
         }
     }, [blockClicked, isFocused]);

frontend/app/element/button.stories.tsx

@@ -0,0 +1,121 @@
+// Copyright 2024, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+import { Button } from "./button";
+
+const meta = {
+    title: "Elements/Button",
+    component: Button,
+    args: {
+        children: "Click Me",
+        disabled: false,
+        className: "",
+        onClick: fn(),
+    },
+    argTypes: {
+        onClick: {
+            action: "clicked",
+            description: "Click event handler",
+        },
+        children: {
+            description: "Content inside the button",
+        },
+        disabled: {
+            description: "Disables the button if true",
+        },
+        className: {
+            description: "Additional class names to style the button",
+        },
+    },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Disabled: Story = {
+    args: {
+        disabled: true,
+        children: "Disabled Button",
+    },
+};
+
+export const GreySolid: Story = {
+    args: {
+        className: "solid grey",
+        children: "Grey Solid Button",
+    },
+};
+
+export const RedSolid: Story = {
+    args: {
+        className: "solid red",
+        children: "Red Solid Button",
+    },
+};
+
+export const YellowSolid: Story = {
+    args: {
+        className: "solid yellow",
+        children: "Yellow Solid Button",
+    },
+};
+
+export const GreenOutlined: Story = {
+    args: {
+        className: "outlined green",
+        children: "Green Outline Button",
+    },
+};
+
+export const GreyOutlined: Story = {
+    args: {
+        className: "outlined grey",
+        children: "Grey Outline Button",
+    },
+};
+
+export const RedOutlined: Story = {
+    args: {
+        className: "outlined red",
+        children: "Red Outline Button",
+    },
+};
+
+export const YellowOutlined: Story = {
+    args: {
+        className: "outlined yellow",
+        children: "Yellow Outline Button",
+    },
+};
+
+export const GreenGhostText: Story = {
+    args: {
+        className: "ghost green",
+        children: "Yellow Ghost Text Button",
+    },
+};
+
+export const GreyGhostText: Story = {
+    args: {
+        className: "ghost grey",
+        children: "Grey Ghost Text Button",
+    },
+};
+
+export const RedGhost: Story = {
+    args: {
+        className: "ghost red",
+        children: "Red Ghost Text Button",
+    },
+};
+
+export const YellowGhostText: Story = {
+    args: {
+        className: "ghost yellow",
+        children: "Yellow Ghost Text Button",
+    },
+};

frontend/app/element/button.tsx

@@ -9,41 +9,39 @@ import "./button.less";
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     className?: string;
     children?: ReactNode;
-    target?: string;
-    source?: string;
 }
 
 const Button = memo(
-    forwardRef<HTMLButtonElement, ButtonProps>(
-        ({ children, disabled, source, className = "", ...props }: ButtonProps, ref) => {
-            const btnRef = useRef<HTMLButtonElement>(null);
-            useImperativeHandle(ref, () => btnRef.current as HTMLButtonElement);
+    forwardRef<HTMLButtonElement, ButtonProps>(({ children, disabled, className = "", ...props }: ButtonProps, ref) => {
+        const btnRef = useRef<HTMLButtonElement>(null);
+        useImperativeHandle(ref, () => btnRef.current as HTMLButtonElement);
 
-            const childrenArray = Children.toArray(children);
+        const childrenArray = Children.toArray(children);
 
-            // Check if the className contains any of the categories: solid, outlined, or ghost
-            const containsButtonCategory = /(solid|outline|ghost)/.test(className);
-            // If no category is present, default to 'solid'
-            const categoryClassName = containsButtonCategory ? className : `solid ${className}`;
+        // Check if the className contains any of the categories: solid, outlined, or ghost
+        const containsButtonCategory = /(solid|outline|ghost)/.test(className);
+        // If no category is present, default to 'solid'
+        const categoryClassName = containsButtonCategory ? className : `solid ${className}`;
 
-            // Check if the className contains any of the color options: green, grey, red, or yellow
-            const containsColor = /(green|grey|red|yellow)/.test(categoryClassName);
-            // If no color is present, default to 'green'
-            const finalClassName = containsColor ? categoryClassName : `green ${categoryClassName}`;
+        // Check if the className contains any of the color options: green, grey, red, or yellow
+        const containsColor = /(green|grey|red|yellow)/.test(categoryClassName);
+        // If no color is present, default to 'green'
+        const finalClassName = containsColor ? categoryClassName : `green ${categoryClassName}`;
 
-            return (
-                <button
-                    ref={btnRef}
-                    tabIndex={disabled ? -1 : 0}
-                    className={clsx("button", finalClassName)}
-                    disabled={disabled}
-                    {...props}
-                >
-                    {childrenArray}
-                </button>
-            );
-        }
-    )
+        return (
+            <button
+                ref={btnRef}
+                tabIndex={disabled ? -1 : 0}
+                className={clsx("button", finalClassName)}
+                disabled={disabled}
+                {...props}
+            >
+                {childrenArray}
+            </button>
+        );
+    })
 );
 
+Button.displayName = "Button";
+
 export { Button };

frontend/app/view/waveai/waveai.tsx

@@ -342,18 +342,24 @@ const ChatWindow = memo(
 
         const handleScrollbarInitialized = (instance: OverlayScrollbars) => {
             const { viewport } = instance.elements();
+            viewport.removeAttribute("tabindex");
             viewport.scrollTo({
                 behavior: "auto",
                 top: chatWindowRef.current?.scrollHeight || 0,
             });
         };
 
+        const handleScrollbarUpdated = (instance: OverlayScrollbars) => {
+            const { viewport } = instance.elements();
+            viewport.removeAttribute("tabindex");
+        };
+
         return (
             <OverlayScrollbarsComponent
                 ref={osRef}
                 className="scrollable"
                 options={{ scrollbars: { autoHide: "leave" } }}
-                events={{ initialized: handleScrollbarInitialized }}
+                events={{ initialized: handleScrollbarInitialized, updated: handleScrollbarUpdated }}
             >
                 <div ref={chatWindowRef} className="chat-window" style={msgWidths}>
                     <div className="filler"></div>
@@ -491,22 +497,6 @@ const WaveAi = ({ model }: { model: WaveAiModel; blockId: string }) => {
         setSelectedBlockIdx(null);
     }, [messages, value]);
 
-    const handleContainerClick = (event: React.MouseEvent<HTMLDivElement>) => {
-        inputRef.current?.focus();
-
-        const target = event.target as HTMLElement;
-        if (
-            target.closest(".copy-button") ||
-            target.closest(".fa-square-terminal") ||
-            target.closest(".waveai-input")
-        ) {
-            return;
-        }
-
-        const pre = target.closest("pre");
-        updatePreTagOutline(pre);
-    };
-
     const updateScrollTop = () => {
         const pres = chatWindowRef.current?.querySelectorAll("pre");
         if (!pres || selectedBlockIdx === null) return;
@@ -610,7 +600,7 @@ const WaveAi = ({ model }: { model: WaveAiModel; blockId: string }) => {
     }, [locked, handleEnterKeyPressed]);
 
     return (
-        <div ref={waveaiRef} className="waveai" onClick={handleContainerClick}>
+        <div ref={waveaiRef} className="waveai">
             <ChatWindow ref={osRef} chatWindowRef={chatWindowRef} messages={messages} msgWidths={msgWidths} />
             <div className="waveai-controls">
                 <div className="waveai-input-wrapper">

frontend/layout/lib/layoutModel.ts

@@ -302,7 +302,7 @@ export class LayoutModel {
      * Perform an action against the layout tree state.
      * @param action The action to perform.
      */
-    treeReducer(action: LayoutTreeAction) {
+    treeReducer(action: LayoutTreeAction, setState = true) {
         switch (action.type) {
             case LayoutTreeActionType.ComputeMove:
                 this.setter(
@@ -369,7 +369,7 @@ export class LayoutModel {
                 this.magnifiedNodeId = this.treeState.magnifiedNodeId;
             }
             this.updateTree();
-            this.setTreeStateAtom(true);
+            if (setState) this.setTreeStateAtom(true);
         }
     }
 
@@ -377,7 +377,7 @@ export class LayoutModel {
      * Callback that is invoked when the upstream tree state has been updated. This ensures the model is updated if the atom is not fully loaded when the model is first instantiated.
      * @param force Whether to force the local tree state to update, regardless of whether the state is already up to date.
      */
-    onTreeStateAtomUpdated = debounce(50, async (force = false) => {
+    async onTreeStateAtomUpdated(force = false) {
         const treeState = this.getter(this.treeStateAtom);
         // Only update the local tree state if it is different from the one in the upstream atom. This function is called even when the update was initiated by the LayoutModel, so we need to filter out false positives or we'll enter an infinite loop.
         if (
@@ -403,7 +403,7 @@ export class LayoutModel {
                                 magnified: action.magnified,
                                 focused: action.focused,
                             };
-                            this.treeReducer(insertNodeAction);
+                            this.treeReducer(insertNodeAction, false);
                             break;
                         }
                         case LayoutTreeActionType.DeleteNode: {
@@ -434,13 +434,16 @@ export class LayoutModel {
                                 magnified: action.magnified,
                                 focused: action.focused,
                             };
-                            this.treeReducer(insertAction);
+                            this.treeReducer(insertAction, false);
                             break;
                         }
                         case LayoutTreeActionType.ClearTree: {
-                            this.treeReducer({
-                                type: LayoutTreeActionType.ClearTree,
-                            } as LayoutTreeClearTreeAction);
+                            this.treeReducer(
+                                {
+                                    type: LayoutTreeActionType.ClearTree,
+                                } as LayoutTreeClearTreeAction,
+                                false
+                            );
                             break;
                         }
                         default:
@@ -448,12 +451,13 @@ export class LayoutModel {
                             break;
                     }
                 }
+                this.setTreeStateAtom(true);
             } else {
                 this.updateTree();
                 this.setTreeStateAtom(force);
             }
         }
-    });
+    }
 
     /**
      * Set the upstream tree state atom to the value of the local tree state.

frontend/layout/lib/layoutModelHooks.ts

@@ -25,7 +25,7 @@ export function getLayoutModelForTab(tabAtom: Atom<Tab>): LayoutModel {
     }
     const layoutTreeStateAtom = withLayoutTreeStateAtomFromTab(tabAtom);
     const layoutModel = new LayoutModel(layoutTreeStateAtom, globalStore.get, globalStore.set);
-    globalStore.sub(layoutTreeStateAtom, () => fireAndForget(() => layoutModel.onTreeStateAtomUpdated()));
+    globalStore.sub(layoutTreeStateAtom, () => fireAndForget(async () => layoutModel.onTreeStateAtomUpdated()));
     layoutModelMap.set(tabId, layoutModel);
     return layoutModel;
 }
@@ -56,7 +56,7 @@ export function useTileLayout(tabAtom: Atom<Tab>, tileContent: TileLayoutContent
     useResizeObserver(layoutModel?.displayContainerRef, layoutModel?.onContainerResize);
 
     // Once the TileLayout is mounted, re-run the state update to get all the nodes to flow in the layout.
-    useLayoutEffect(() => fireAndForget(() => layoutModel.onTreeStateAtomUpdated(true)), []);
+    useEffect(() => fireAndForget(async () => layoutModel.onTreeStateAtomUpdated(true)), []);
 
     useEffect(() => layoutModel.registerTileLayout(tileContent), [tileContent]);
     return layoutModel;

frontend/util/focusutil.ts

@@ -54,7 +54,7 @@ export function focusedBlockId(): string {
         }
     }
     const sel = document.getSelection();
-    if (sel && sel.anchorNode) {
+    if (sel && sel.anchorNode && sel.rangeCount > 0 && !sel.isCollapsed) {
         let anchor = sel.anchorNode;
         if (anchor instanceof Text) {
             anchor = anchor.parentElement;

package.json

@@ -7,7 +7,7 @@
     "productName": "Wave",
     "description": "Open-Source AI-Native Terminal Built for Seamless Workflows",
     "license": "Apache-2.0",
-    "version": "0.8.0-beta.6",
+    "version": "0.8.0-beta.7",
     "homepage": "https://waveterm.dev",
     "build": {
         "appId": "dev.commandline.waveterm"
@@ -30,13 +30,13 @@
         "@chromatic-com/storybook": "^2.0.2",
         "@eslint/js": "^9.10.0",
         "@rollup/plugin-node-resolve": "^15.2.3",
-        "@storybook/addon-essentials": "^8.3.0",
-        "@storybook/addon-interactions": "^8.3.0",
-        "@storybook/addon-links": "^8.3.0",
-        "@storybook/blocks": "^8.3.0",
-        "@storybook/react": "^8.3.0",
-        "@storybook/react-vite": "^8.3.0",
-        "@storybook/test": "^8.3.0",
+        "@storybook/addon-essentials": "^8.3.2",
+        "@storybook/addon-interactions": "^8.3.2",
+        "@storybook/addon-links": "^8.3.2",
+        "@storybook/blocks": "^8.3.2",
+        "@storybook/react": "^8.3.2",
+        "@storybook/react-vite": "^8.3.2",
+        "@storybook/test": "^8.3.2",
         "@types/css-tree": "^2",
         "@types/debug": "^4",
         "@types/electron": "^1.6.10",
@@ -65,7 +65,7 @@
         "prettier-plugin-organize-imports": "^4.0.0",
         "rollup-plugin-flow": "^1.1.1",
         "semver": "^7.6.3",
-        "storybook": "^8.3.0",
+        "storybook": "^8.3.2",
         "ts-node": "^10.9.2",
         "tslib": "^2.6.3",
         "tsx": "^4.19.1",