feat(ui): support read only block

api/api_schemas.py

@@ -96,6 +96,8 @@ class BlockInfo(BaseModel):
     slots: List[Parameter]
     inports: List[Parameter]
     outport: str  # the output class name
+    description: Optional[str]
+    examples: Optional[str]
 
 
 class ApplicationBlocksResponse(APIModel):

api/application.py

@@ -147,6 +147,8 @@ def blocks(self) -> ApplicationBlocksResponse:
                         slots=self.resolve_params(self.resolver.slots(name)),
                         inports=self.resolve_params(self.resolver.inports(name)),
                         outport=self.resolver.relookup(self.resolver.outport(name)),
+                        description=self.resolver.lookup(name, "description"),
+                        examples=self.resolver.lookup(name, "examples"),
                     )
                 )
 

blocks/llm.py

@@ -10,7 +10,13 @@
 from .base import BaseBlock
 
 
-@block(name="LLM", kind="llm")
+@block(
+    name="LLM",
+    kind="llm",
+    description="""test
+test new line""",
+    examples="""this is a text""",
+)
 class LLMChain(BaseBlock):
     """
     LLMChain render template with given text and pass the result to llm model.

resolver/resolver.py

@@ -196,13 +196,21 @@ def outport(self, name: str) -> Optional[type]:
         return signature.return_annotation
 
 
-def block(name: str, kind: str, alias: str = None):
+def block(
+    name: str,
+    kind: str,
+    alias: Optional[str] = None,
+    description: Optional[str] = None,
+    examples: Optional[str] = None,
+):
     """
     Decorator for registering a block class.
     Args:
         name: The name of the block.
         kind: The kind of the block (e.g., 'input', 'output').
         alias: An optional alias for the block name.
+        description: The description of the block.
+        examples: Examples about the usage of the block.
     Returns:
         The decorated class.
     """
@@ -215,6 +223,8 @@ def decorator(cls):
                 "category": "block",
                 "dir": kind,
                 "class": cls,
+                "description": description,
+                "examples": examples,
             }
         )
         return cls

ui/src/modules/app_builder/Block/ROBlock.tsx

@@ -0,0 +1,23 @@
+import { forwardRef } from 'react'
+import { BlockNode, BlockNodeProps } from '.'
+
+export const ROBlock = forwardRef<HTMLDivElement, BlockNodeProps & { onClick?: () => void }>(
+  ({ schema, node, onClick }, ref) => {
+    return (
+      <BlockNode
+        ref={ref}
+        onClick={onClick}
+        id="read_only_block"
+        readonly={true}
+        data={{ schema, node }}
+        selected={false}
+        dragging={false}
+        type=""
+        zIndex={0}
+        isConnectable={false}
+        xPos={0}
+        yPos={0}
+      />
+    )
+  }
+)

ui/src/modules/app_builder/Block/index.tsx

@@ -17,7 +17,7 @@ import {
 } from '@mantine/core'
 import { IconCheck, IconCopy, IconSettings, IconX } from '@tabler/icons-react'
 import { Edge, Handle, NodeProps, Position, useEdges, useNodeId, useReactFlow, useUpdateNodeInternals } from 'reactflow'
-import { useMemo, useState } from 'react'
+import { forwardRef, useMemo, useState } from 'react'
 import { nanoid } from 'nanoid'
 import { useDisclosure } from '@mantine/hooks'
 import { useFormContext } from 'react-hook-form'
@@ -62,7 +62,10 @@ export interface DisplayedInteraction {
   isError: boolean
 }
 
-export const BlockNode: React.FC<NodeProps<BlockNodeProps>> = ({ data, selected }) => {
+export const BlockNode = forwardRef<
+  HTMLDivElement,
+  NodeProps<BlockNodeProps> & { readonly?: boolean; onClick?: () => void }
+>(({ data, selected, readonly, onClick }, ref) => {
   const { colors } = useMantineTheme()
   const PORT_CUSTOM_STYLE = usePortCustomStyle()
   const { schema, node, interaction } = data
@@ -93,7 +96,7 @@ export const BlockNode: React.FC<NodeProps<BlockNodeProps>> = ({ data, selected
   useRegisterCloseDrawer(close)
 
   return (
-    <>
+    <Box style={readonly ? { cursor: 'pointer', pointerEvents: 'none' } : undefined} ref={ref} onClick={onClick}>
       <Stack
         bg="white"
         miw="220px"
@@ -126,30 +129,34 @@ export const BlockNode: React.FC<NodeProps<BlockNodeProps>> = ({ data, selected
                   ...PORT_CUSTOM_STYLE,
                   background: colors.gray[4],
                   border: `${PORT_BORDER}px solid ${colors.gray[2]}`,
-                  left: `-${PORT_OFFSET}px`
+                  left: `-${PORT_OFFSET}px`,
+                  ...(readonly ? { cursor: 'pointer', pointerEvents: 'none' } : {})
                 }}
               />
             </Tooltip>
-            {alias}({node.id})
+            {alias}
+            {node.id ? `(${node.id})` : ''}
           </Box>
-          <Group gap={4}>
-            <CopyButton value={node?.id || ''} timeout={2000}>
-              {({ copied, copy }) => (
-                <Tooltip label={copied ? 'Copied' : 'Copy Block ID'}>
-                  <ActionIcon color={copied ? 'teal' : 'gray'} variant="subtle" onClick={copy}>
-                    {copied ? <IconCheck style={{ width: rem(16) }} /> : <IconCopy style={{ width: rem(16) }} />}
+          {!readonly && (
+            <Group gap={4}>
+              <CopyButton value={node?.id || ''} timeout={2000}>
+                {({ copied, copy }) => (
+                  <Tooltip label={copied ? 'Copied' : 'Copy Block ID'}>
+                    <ActionIcon color={copied ? 'teal' : 'gray'} variant="subtle" onClick={copy}>
+                      {copied ? <IconCheck style={{ width: rem(16) }} /> : <IconCopy style={{ width: rem(16) }} />}
+                    </ActionIcon>
+                  </Tooltip>
+                )}
+              </CopyButton>
+              {!!slots?.length && (
+                <Tooltip label="Configuration">
+                  <ActionIcon variant="subtle" color="gray" onClick={openDrawer}>
+                    <IconSettings size="1rem" />
                   </ActionIcon>
                 </Tooltip>
               )}
-            </CopyButton>
-            {!!slots?.length && (
-              <Tooltip label="Configuration">
-                <ActionIcon variant="subtle" color="gray" onClick={openDrawer}>
-                  <IconSettings size="1rem" />
-                </ActionIcon>
-              </Tooltip>
-            )}
-          </Group>
+            </Group>
+          )}
         </Group>
         <Stack gap={6}>
           {inportsWithoutIgnorePorts.map((p) => {
@@ -179,7 +186,8 @@ export const BlockNode: React.FC<NodeProps<BlockNodeProps>> = ({ data, selected
                     isValidConnection={() => false}
                     style={{
                       ...PORT_CUSTOM_STYLE,
-                      left: `-${PORT_OFFSET}px`
+                      left: `-${PORT_OFFSET}px`,
+                      ...(readonly ? { cursor: 'pointer', pointerEvents: 'none' } : {})
                     }}
                   />
                 </Tooltip>
@@ -209,7 +217,8 @@ export const BlockNode: React.FC<NodeProps<BlockNodeProps>> = ({ data, selected
                   isValidConnection={isValidConnection}
                   style={{
                     ...PORT_CUSTOM_STYLE,
-                    right: `-${PORT_OFFSET}px`
+                    right: `-${PORT_OFFSET}px`,
+                    ...(readonly ? { cursor: 'pointer', pointerEvents: 'none' } : {})
                   }}
                 />
               </Tooltip>
@@ -233,9 +242,9 @@ export const BlockNode: React.FC<NodeProps<BlockNodeProps>> = ({ data, selected
           props={node}
         />
       )}
-    </>
+    </Box>
   )
-}
+})
 
 interface Port {
   id: string

ui/src/modules/app_builder/Canvas/HotKeyMenu.tsx

@@ -1,11 +1,13 @@
-import { Box, Menu, TextInput, rem } from '@mantine/core'
+import { Box, Group, Menu, Popover, Stack, Text, TextInput, Title, rem } from '@mantine/core'
 import { IconChevronRight } from '@tabler/icons-react'
-import { useEffect, useMemo, useState } from 'react'
+import { MutableRefObject, useEffect, useMemo, useRef, useState } from 'react'
 import { BlockInfo } from '@api/linguflow.schemas'
 import { nanoid } from 'nanoid'
 import { Node, useReactFlow } from 'reactflow'
+import { useDisclosure, useHover } from '@mantine/hooks'
 import { DIR_SORTS, useBlockSchema } from '../useSchema'
 import { BLOCK_NODE_NAME, BlockNodeProps } from '../Block'
+import { ROBlock } from '../Block/ROBlock'
 import { useContainerElem } from './useContainerElem'
 
 export const HotKeyMenu: React.FC<{
@@ -68,12 +70,7 @@ export const HotKeyMenu: React.FC<{
         />
         {(!search || !!searchedBlocks.length) && <Menu.Divider />}
 
-        {!!search &&
-          searchedBlocks.map((b) => (
-            <Menu.Item key={b.name} onClick={() => handleClickBlock(b)}>
-              {b.alias}
-            </Menu.Item>
-          ))}
+        {!!search && searchedBlocks.map((b) => <BlockItem key={b.name} block={b} onClick={handleClickBlock} />)}
         {!search &&
           dirAndBlocks.map(([dir, blocks]) => (
             <Menu
@@ -92,9 +89,7 @@ export const HotKeyMenu: React.FC<{
               </Menu.Target>
               <Menu.Dropdown>
                 {blocks.map((b) => (
-                  <Menu.Item key={b.name} onClick={() => handleClickBlock(b)}>
-                    {b.alias}
-                  </Menu.Item>
+                  <BlockItem key={b.name} block={b} onClick={handleClickBlock} />
                 ))}
               </Menu.Dropdown>
             </Menu>
@@ -103,3 +98,64 @@ export const HotKeyMenu: React.FC<{
     </Menu>
   )
 }
+
+const BlockItem: React.FC<{ block: BlockInfo; onClick: (b: BlockInfo) => void }> = ({ block, onClick }) => {
+  const [inItem, setInItem] = useState(false)
+  const [opened, { close, open }] = useDisclosure(false)
+  const { hovered, ref } = useHover()
+  const timerRef: MutableRefObject<number | null> = useRef(null)
+
+  useEffect(() => {
+    clearTimeout(timerRef.current as any as number)
+    if (!hovered && !inItem) {
+      timerRef.current = setTimeout(() => {
+        close()
+      }, 100) as any as number
+    }
+  }, [hovered, inItem, close])
+
+  return (
+    <Popover
+      opened={opened}
+      position="right-end"
+      offset={{ mainAxis: 8, crossAxis: 4 }}
+      shadow="sm"
+      withinPortal={false}
+    >
+      <Popover.Target>
+        <Menu.Item
+          onClick={() => onClick(block)}
+          onMouseEnter={() => {
+            setInItem(true)
+            open()
+          }}
+          onMouseLeave={() => setInItem(false)}
+        >
+          {block.alias}
+        </Menu.Item>
+      </Popover.Target>
+      <Popover.Dropdown>
+        <Group align="flex-start">
+          {(block.description || block.examples) && (
+            <Stack gap="xs" justify="flex-start" maw="300px">
+              {block.description && (
+                <>
+                  <Title order={5}>Description</Title>
+                  <Text>{block.description}</Text>
+                </>
+              )}
+              {block.examples && (
+                <>
+                  <Title order={5}>Example</Title>
+                  <Text>{block.examples}</Text>
+                </>
+              )}
+            </Stack>
+          )}
+          {/* <Box ref={ref}>123 {hovered.toString()}</Box> */}
+          <ROBlock schema={block} node={{} as any} onClick={() => onClick(block)} />
+        </Group>
+      </Popover.Dropdown>
+    </Popover>
+  )
+}