fix inconsistencies in jupyter cells

Author: williamstein

src/packages/frontend/_jupyter.sass

@@ -110,5 +110,4 @@
 
 .cc-jupyter-buttonbar-dropdown
   .ant-dropdown-menu-item
-    font-size: 12px !important
     color: $COL_GRAY_D !important

src/packages/frontend/jupyter/cell-buttonbar-menu.tsx

@@ -174,7 +174,14 @@ export function CodeBarDropdownMenu({ actions, frameActions, id, cell }) {
       icon: <Icon name="arrow-down" />,
       onClick: () => move_cell(1),
     },
-  ];
+  ].map(({ key, label, icon, onClick }) => {
+    return {
+      key,
+      label,
+      onClick,
+      icon: <span style={{ width: "24px" }}>{icon}</span>,
+    };
+  });
 
   return (
     <Dropdown
@@ -184,13 +191,8 @@ export function CodeBarDropdownMenu({ actions, frameActions, id, cell }) {
       mouseLeaveDelay={1.5}
       overlayClassName={"cc-jupyter-buttonbar-dropdown"}
     >
-      <Button
-        type="text"
-        size="small"
-        style={CODE_BAR_BTN_STYLE}
-        icon={<Icon name="ellipsis" rotate="90" />}
-      >
-        More
+      <Button type="text" size="small" style={CODE_BAR_BTN_STYLE}>
+        <Icon name="ellipsis" rotate="90" style={{ fontSize: "20px" }} />
       </Button>
     </Dropdown>
   );

src/packages/frontend/jupyter/cell-buttonbar.tsx

@@ -168,7 +168,6 @@ export const CellButtonBar: React.FC<Props> = React.memo(
           id={id}
           actions={actions}
           llmTools={llmTools}
-          is_current={is_current}
         />
       );
     }

src/packages/frontend/jupyter/cell-list.tsx

@@ -346,10 +346,11 @@ export const CellList: React.FC<CellListProps> = (props: CellListProps) => {
           index: index + EXTRA_TOP_CELLS,
         });
         // hack which seems necessary for jupyter at least.
-        requestAnimationFrame(() =>
-          virtuosoRef.current?.scrollToIndex({
-            index: index + EXTRA_TOP_CELLS,
-          }),
+        requestAnimationFrame(
+          () =>
+            virtuosoRef.current?.scrollToIndex({
+              index: index + EXTRA_TOP_CELLS,
+            }),
         );
       }
     } else if (scroll.startsWith("list")) {
@@ -359,23 +360,25 @@ export const CellList: React.FC<CellListProps> = (props: CellListProps) => {
           index: index + EXTRA_TOP_CELLS,
           align: "end",
         });
-        requestAnimationFrame(() =>
-          virtuosoRef.current?.scrollToIndex({
-            index: index + EXTRA_TOP_CELLS,
-            align: "end",
-          }),
+        requestAnimationFrame(
+          () =>
+            virtuosoRef.current?.scrollToIndex({
+              index: index + EXTRA_TOP_CELLS,
+              align: "end",
+            }),
         );
       } else if (scroll == "list down") {
         const index = virtuosoRangeRef.current?.endIndex;
         virtuosoRef.current?.scrollToIndex({
           index: index + EXTRA_TOP_CELLS,
           align: "start",
         });
-        requestAnimationFrame(() =>
-          virtuosoRef.current?.scrollToIndex({
-            index: index + EXTRA_TOP_CELLS,
-            align: "start",
-          }),
+        requestAnimationFrame(
+          () =>
+            virtuosoRef.current?.scrollToIndex({
+              index: index + EXTRA_TOP_CELLS,
+              align: "start",
+            }),
         );
       }
     }
@@ -795,7 +798,6 @@ function DivTempHeight({ children, height }) {
 
   const style: CSS = {
     minHeight: height,
-    paddingTop: "5px", // for the cell buttons on top of the input, otherwise they're cut off
   };
 
   return (

src/packages/frontend/jupyter/cell-output-toggle.tsx

@@ -13,10 +13,9 @@ import { Button, Tooltip } from "antd";
 const SCROLLED_STYLE: React.CSSProperties = {
   fontSize: "inherit",
   padding: 0,
-  display: "flex", // flex used to move output prompt to bottom.
-  flexDirection: "column",
   height: "auto",
-  cursor: "pointer",
+  display: "flex",
+  flexDirection: "column",
 } as const;
 
 const NORMAL_STYLE: React.CSSProperties = {
@@ -52,11 +51,11 @@ export const OutputToggle: React.FC<OutputToggleProps> = React.memo(
           onDoubleClick={collapse_output}
         >
           {children}
-          <div style={{ flex: 1 }} /> {/* use up all space */}
+          <span style={{ flex: 1 }} />
         </Button>
       </Tooltip>
     );
-  }
+  },
 );
 
 interface CollapsedOutputProps {
@@ -85,5 +84,5 @@ export const CollapsedOutput: React.FC<CollapsedOutputProps> = React.memo(
         </Button>
       </div>
     );
-  }
+  },
 );

src/packages/frontend/jupyter/cell.tsx

@@ -256,12 +256,26 @@ export const Cell: React.FC<Props> = React.memo((props: Props) => {
       borderLeft: `10px solid ${color}`,
       borderRight: `10px solid ${color}`,
       borderRadius: "10px",
-      padding: "2px",
-      // The bigger top margin when in fully read only mode (no props.actions, e.g., timetravel view)
-      // is to deal with the fact that the insert cell bar isn't rendered, but some of the controls off
-      // to the right assume it is.
-      margin: props.actions != null ? "10px 15px 2px 5px" : "20px 15px 2px 5px",
       position: "relative",
+      // The bigger top margin when in fully read only mode (no props.actions,
+      // e.g., timetravel view) is to deal with the fact that the insert cell
+      // bar isn't rendered, but some of the controls off
+      // to the right assume it is.
+      // The bigger BOTTOM margin when no output is because otherwise the big
+      // top margin makes things look very weirdly unbalanced.
+      ...(props.cell.get("output") || props.actions == null
+        ? {
+            padding: "2px",
+            margin:
+              props.actions != null ? "10px 15px 2px 5px" : "20px 15px 2px 5px",
+          }
+        : {
+            padding: "2px 2px 15px 2px",
+            margin:
+              props.actions != null
+                ? "10px 15px -15px 5px"
+                : "20px 15px -15px 5px",
+          }),
     };
 
     if (props.is_selected) {

src/packages/frontend/jupyter/codemirror-editor.tsx

@@ -769,7 +769,7 @@ export const CodeMirrorEditor: React.FC<CodeMirrorEditorProps> = ({
   }
 
   function renderPlaceholder() {
-    if (!is_current || cmValue) {
+    if (!is_current || cmValue || !setShowAICellGen) {
       return;
     }
     return (

src/packages/frontend/jupyter/commands.ts

@@ -445,23 +445,31 @@ export function commands(actions: AllActions): {
     },
 
     "merge cell with next cell": {
+      i: "merge-cells-outlined",
+      ir: "90",
       m: "Merge Cell Below",
       f: () => actions.frame_actions?.merge_cell_below(),
     },
 
     "merge cell with previous cell": {
+      i: "merge-cells-outlined",
+      ir: "90",
       m: "Merge Cell Above",
       f: () => actions.frame_actions?.merge_cell_above(),
     },
 
     "merge cells": {
+      i: "merge-cells-outlined",
+      ir: "90",
       m: "Merge Selected Cells",
       k: [{ mode: "escape", shift: true, which: 77 }],
       f: () => actions.frame_actions?.merge_selected_cells(),
     },
 
     "merge selected cells": {
       // why is this in jupyter; it's the same as the above?
+      i: "merge-cells-outlined",
+      ir: "90",
       m: "Merge selected cells",
       f: () => actions.frame_actions?.merge_selected_cells(),
     },

src/packages/frontend/jupyter/llm/cell-tool.tsx

@@ -18,8 +18,7 @@ import {
 } from "antd";
 import { CSSProperties, useEffect, useMemo, useState } from "react";
 import { Entries } from "type-fest";
-
-import { CSS, useAsyncEffect } from "@cocalc/frontend/app-framework";
+import { useAsyncEffect } from "@cocalc/frontend/app-framework";
 import getChatActions from "@cocalc/frontend/chat/get-actions";
 import { A, Paragraph, RawPrompt, Text } from "@cocalc/frontend/components";
 import AIAvatar from "@cocalc/frontend/components/ai-avatar";
@@ -38,7 +37,6 @@ import track from "@cocalc/frontend/user-tracking";
 import { LLMTools } from "@cocalc/jupyter/types";
 import { LanguageModel } from "@cocalc/util/db-schema/llm-utils";
 import { capitalize, getRandomColor, unreachable } from "@cocalc/util/misc";
-import { COLORS } from "@cocalc/util/theme";
 import { JupyterActions } from "../browser-actions";
 import { CODE_BAR_BTN_STYLE } from "../consts";
 import { cellOutputToText } from "../output-messages/ansi";
@@ -48,7 +46,6 @@ interface Props {
   id: string;
   style?: CSSProperties;
   llmTools?: LLMTools;
-  is_current?: boolean;
 }
 
 const CONTENT_WIDTH = 600;
@@ -213,7 +210,6 @@ export function LLMCellTool({
   id,
   style,
   llmTools,
-  is_current,
 }: Props) {
   const { actions: project_actions, onCoCalcCom } = useProjectContext();
   const { project_id, path } = useFrameContext();
@@ -388,13 +384,6 @@ export function LLMCellTool({
   }
 
   function renderDropdown() {
-    const txtStyle: CSS = is_current
-      ? {
-          color: COLORS.AI_ASSISTANT_FONT,
-          fontWeight: "bold",
-        }
-      : {};
-
     return (
       <Dropdown
         trigger={["click"]}
@@ -406,7 +395,8 @@ export function LLMCellTool({
                 key: mode,
                 label: (
                   <Tooltip title={action.descr} placement={"left"}>
-                    <Icon name={action.icon} /> {capitalize(mode)}
+                    <Icon name={action.icon} style={{ marginRight: "5px" }} />{" "}
+                    {capitalize(mode)}
                   </Tooltip>
                 ),
                 onClick: () => setMode(mode as Mode),
@@ -415,22 +405,16 @@ export function LLMCellTool({
           ),
         }}
       >
-        <Tooltip title="Use AI assistance on this cell">
+        <Tooltip title="Use AI assitant on this cell">
           <Button
             disabled={isQuerying}
             type="text"
             size="small"
             style={CODE_BAR_BTN_STYLE}
-            icon={
-              <AIAvatar
-                size={14}
-                style={{ top: "1px" }}
-                iconColor={is_current ? COLORS.AI_ASSISTANT_FONT : undefined}
-              />
-            }
+            icon={<AIAvatar size={14} style={{ top: "1px" }} />}
           >
             <Space size="small">
-              <span style={txtStyle}>Tools</span>
+              Assistant
               <Icon name="angle-down" />
             </Space>
           </Button>