Skip to content

Commit d659bff

Browse files
Col0ringCol0ring
committed
refactor(antdx): new components folder & code-highlighter
1 parent 0b74709 commit d659bff

31 files changed

Lines changed: 955 additions & 24 deletions

File tree

‎backend/modelscope_studio/components/antdx/__init__.py‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,12 @@
1515
from .bubble.list.role import AntdXBubbleListRole as BubbleListRole
1616
from .bubble.divider import AntdXBubbleDivider as BubbleDivider
1717
from .bubble.system import AntdXBubbleSystem as BubbleSystem
18+
from .code_highlighter import AntdXCodeHighlighter as CodeHighlighter
1819
from .conversations import AntdXConversations as Conversations
1920
from .conversations.item import AntdXConversationsItem as ConversationsItem
21+
from .folder import AntdXFolder as Folder
22+
from .folder.tree_node import AntdXFolderTreeNode as FolderTreeNode
23+
from .folder.directory_icon import AntdXFolderDirectoryIcon as FolderDirectoryIcon
2024
from .prompts import AntdXPrompts as Prompts
2125
from .prompts.item import AntdXPromptsItem as PromptsItem
2226
from .sender import AntdXSender as Sender

‎backend/modelscope_studio/components/antdx/code_highlighter/__init__.py‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
from __future__ import annotations
2+
3+
from ....utils.dev import ModelScopeLayoutComponent, resolve_frontend_dir
4+
5+
6+
class AntdXCodeHighlighter(ModelScopeLayoutComponent):
7+
"""
8+
Ant Design X: https://x.ant.design/components/code-highlighter
9+
"""
10+
EVENTS = []
11+
12+
# supported slots
13+
SLOTS = ['header']
14+
15+
def __init__(
16+
self,
17+
value: str | None = None,
18+
*,
19+
lang: str | None = None,
20+
header: str | bool | None = None,
21+
highlight_props: dict | None = None,
22+
prism_light_mode: bool | None = None,
23+
styles: dict | str | None = None,
24+
class_names: dict | str | None = None,
25+
additional_props: dict | None = None,
26+
root_class_name: str | None = None,
27+
as_item: str | None = None,
28+
_internal: None = None,
29+
# gradio properties
30+
visible: bool = True,
31+
elem_id: str | None = None,
32+
elem_classes: list[str] | str | None = None,
33+
elem_style: dict | None = None,
34+
render: bool = True,
35+
**kwargs):
36+
super().__init__(visible=visible,
37+
elem_id=elem_id,
38+
elem_classes=elem_classes,
39+
render=render,
40+
as_item=as_item,
41+
elem_style=elem_style,
42+
**kwargs)
43+
self.additional_props = additional_props
44+
self.styles = styles
45+
self.class_names = class_names
46+
self.root_class_name = root_class_name
47+
self.value = value
48+
self.lang = lang
49+
self.header = header
50+
self.highlight_props = highlight_props
51+
self.prism_light_mode = prism_light_mode
52+
53+
FRONTEND_DIR = resolve_frontend_dir("code-highlighter", type="antdx")
54+
55+
@property
56+
def skip_api(self):
57+
return True
58+
59+
def preprocess(self, payload: None) -> None:
60+
return payload
61+
62+
def postprocess(self, value: None) -> None:
63+
64+
return value
65+
66+
def example_payload(self) -> None:
67+
return None
68+
69+
def example_value(self) -> None:
70+
return None

‎backend/modelscope_studio/components/antdx/components.py‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,12 @@
1414
from .bubble.list.role import AntdXBubbleListRole
1515
from .bubble.divider import AntdXBubbleDivider
1616
from .bubble.system import AntdXBubbleSystem
17+
from .code_highlighter import AntdXCodeHighlighter
1718
from .conversations import AntdXConversations
1819
from .conversations.item import AntdXConversationsItem
20+
from .folder import AntdXFolder
21+
from .folder.tree_node import AntdXFolderTreeNode
22+
from .folder.directory_icon import AntdXFolderDirectoryIcon
1923
from .prompts import AntdXPrompts
2024
from .prompts.item import AntdXPromptsItem
2125
from .sender import AntdXSender

‎backend/modelscope_studio/components/antdx/folder/__init__.py‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
from __future__ import annotations
2+
3+
from typing import Any
4+
5+
from gradio.events import EventListener
6+
7+
from ....utils.dev import ModelScopeLayoutComponent, resolve_frontend_dir
8+
from .tree_node import AntdXFolderTreeNode
9+
from .directory_icon import AntdXFolderDirectoryIcon
10+
11+
12+
class AntdXFolder(ModelScopeLayoutComponent):
13+
"""
14+
Ant Design X: https://x.ant.design/components/folder
15+
"""
16+
TreeNode = AntdXFolderTreeNode
17+
DirectoryIcon = AntdXFolderDirectoryIcon
18+
19+
EVENTS = [
20+
EventListener("file_click",
21+
callback=lambda block: block._internal.update(
22+
bind_fileClick_event=True)),
23+
EventListener("folder_click",
24+
callback=lambda block: block._internal.update(
25+
bind_folderClick_event=True)),
26+
EventListener("selected_file_change",
27+
callback=lambda block: block._internal.update(
28+
bind_selectedFileChange_event=True)),
29+
EventListener("expanded_paths_change",
30+
callback=lambda block: block._internal.update(
31+
bind_expandedPathsChange_event=True)),
32+
EventListener("file_content_service_load_file_content",
33+
callback=lambda block: block._internal.update(
34+
bind_fileContentService_loadFileContent_event=True)),
35+
]
36+
37+
# supported slots
38+
SLOTS = [
39+
'emptyRender', 'previewRender', 'directoryTitle', 'previewTitle',
40+
'treeData', 'directoryIcons'
41+
]
42+
43+
def __init__(
44+
self,
45+
additional_props: dict | None = None,
46+
*,
47+
tree_data: list[dict] | None = None,
48+
selectable: bool | None = None,
49+
selected_file: list[str] | None = None,
50+
default_selected_file: list[str] | None = None,
51+
directory_tree_width: int | float | str | None = None,
52+
empty_render: str | None = None,
53+
preview_render: str | None = None,
54+
expanded_paths: list[str] | None = None,
55+
default_expanded_paths: list[str] | None = None,
56+
default_expand_all: bool | None = None,
57+
directory_title: str | None = None,
58+
preview_title: str | None = None,
59+
directory_icons: dict | None = None,
60+
root_class_name: str | None = None,
61+
class_names: dict | str | None = None,
62+
styles: dict | str | None = None,
63+
as_item: str | None = None,
64+
_internal: None = None,
65+
# gradio properties
66+
visible: bool = True,
67+
elem_id: str | None = None,
68+
elem_classes: list[str] | str | None = None,
69+
elem_style: dict | None = None,
70+
render: bool = True,
71+
**kwargs):
72+
super().__init__(visible=visible,
73+
elem_id=elem_id,
74+
elem_classes=elem_classes,
75+
render=render,
76+
as_item=as_item,
77+
elem_style=elem_style,
78+
**kwargs)
79+
self.class_names = class_names
80+
self.styles = styles
81+
self.additional_props = additional_props
82+
self.root_class_name = root_class_name
83+
self.tree_data = tree_data
84+
self.selectable = selectable
85+
self.selected_file = selected_file
86+
self.default_selected_file = default_selected_file
87+
self.directory_tree_width = directory_tree_width
88+
self.empty_render = empty_render
89+
self.preview_render = preview_render
90+
self.expanded_paths = expanded_paths
91+
self.default_expanded_paths = default_expanded_paths
92+
self.default_expand_all = default_expand_all
93+
self.directory_title = directory_title
94+
self.preview_title = preview_title
95+
self.directory_icons = directory_icons
96+
97+
FRONTEND_DIR = resolve_frontend_dir("folder", type="antdx")
98+
99+
@property
100+
def skip_api(self):
101+
return True
102+
103+
def preprocess(self, payload: None) -> None:
104+
return payload
105+
106+
def postprocess(self, value: None | None) -> None:
107+
return value
108+
109+
def example_payload(self) -> Any:
110+
return None
111+
112+
def example_value(self) -> Any:
113+
return None

‎backend/modelscope_studio/components/antdx/folder/directory_icon/__init__.py‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
from __future__ import annotations
2+
3+
from typing import Any, Literal
4+
5+
from .....utils.dev import ModelScopeLayoutComponent, resolve_frontend_dir
6+
7+
8+
class AntdXFolderDirectoryIcon(ModelScopeLayoutComponent):
9+
"""
10+
Ant Design X: https://x.ant.design/components/folder
11+
"""
12+
13+
EVENTS = []
14+
15+
# supported slots
16+
SLOTS = []
17+
18+
def __init__(
19+
self,
20+
extension: str | Literal['directory'],
21+
*,
22+
additional_props: dict | None = None,
23+
as_item: str | None = None,
24+
_internal: None = None,
25+
# gradio properties
26+
visible: bool = True,
27+
elem_id: str | None = None,
28+
elem_classes: list[str] | str | None = None,
29+
elem_style: dict | None = None,
30+
render: bool = True,
31+
**kwargs):
32+
super().__init__(visible=visible,
33+
elem_id=elem_id,
34+
elem_classes=elem_classes,
35+
render=render,
36+
as_item=as_item,
37+
elem_style=elem_style,
38+
**kwargs)
39+
self.extension = extension
40+
self.additional_props = additional_props
41+
42+
FRONTEND_DIR = resolve_frontend_dir("folder",
43+
"directory-icon",
44+
type="antdx")
45+
46+
@property
47+
def skip_api(self):
48+
return True
49+
50+
def preprocess(self, payload: None) -> None:
51+
return payload
52+
53+
def postprocess(self, value: None) -> None:
54+
return value
55+
56+
def example_payload(self) -> Any:
57+
return None
58+
59+
def example_value(self) -> Any:
60+
return None

‎backend/modelscope_studio/components/antdx/folder/tree_node/__init__.py‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
from __future__ import annotations
2+
3+
from typing import Any
4+
5+
from .....utils.dev import ModelScopeLayoutComponent, resolve_frontend_dir
6+
7+
8+
class AntdXFolderTreeNode(ModelScopeLayoutComponent):
9+
"""
10+
Ant Design X: https://x.ant.design/components/folder
11+
"""
12+
13+
EVENTS = []
14+
15+
# supported slots
16+
SLOTS = []
17+
18+
def __init__(
19+
self,
20+
*,
21+
title: str | None = None,
22+
path: str | None = None,
23+
content: str | None = None,
24+
additional_props: dict | None = None,
25+
as_item: str | None = None,
26+
_internal: None = None,
27+
# gradio properties
28+
visible: bool = True,
29+
elem_id: str | None = None,
30+
elem_classes: list[str] | str | None = None,
31+
elem_style: dict | None = None,
32+
render: bool = True,
33+
**kwargs):
34+
super().__init__(visible=visible,
35+
elem_id=elem_id,
36+
elem_classes=elem_classes,
37+
render=render,
38+
as_item=as_item,
39+
elem_style=elem_style,
40+
**kwargs)
41+
self.title = title
42+
self.additional_props = additional_props
43+
self.path = path
44+
self.content = content
45+
46+
FRONTEND_DIR = resolve_frontend_dir("folder", "tree-node", type="antdx")
47+
48+
@property
49+
def skip_api(self):
50+
return True
51+
52+
def preprocess(self, payload: None) -> None:
53+
return payload
54+
55+
def postprocess(self, value: None) -> None:
56+
return value
57+
58+
def example_payload(self) -> Any:
59+
return None
60+
61+
def example_value(self) -> Any:
62+
return None

‎frontend/antdx/code-highlighter/Index.svelte‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<script lang="ts">
2+
import {
3+
getProps,
4+
importComponent,
5+
processProps,
6+
} from '@svelte-preprocess-react/component';
7+
import { getSlots } from '@svelte-preprocess-react/svelte-contexts/slot.svelte';
8+
import cls from 'classnames';
9+
10+
const AwaitedCodeHighlighter = importComponent(
11+
() => import('./code-highlighter')
12+
);
13+
14+
const props = $props();
15+
const { gradio, getComponentProps, getAdditionalProps, children } = getProps<{
16+
additional_props?: Record<string, any>;
17+
as_item?: string | undefined;
18+
_internal: {
19+
layout?: boolean;
20+
};
21+
}>(() => props);
22+
23+
const getProceedProps = processProps(() => {
24+
const {
25+
visible,
26+
_internal,
27+
as_item,
28+
elem_classes,
29+
elem_id,
30+
elem_style,
31+
...restProps
32+
} = getComponentProps();
33+
return {
34+
gradio,
35+
additionalProps: getAdditionalProps(),
36+
_internal,
37+
as_item,
38+
restProps,
39+
visible,
40+
elem_id,
41+
elem_classes,
42+
elem_style,
43+
};
44+
}, {});
45+
const proceedProps = $derived(getProceedProps());
46+
47+
const slots = getSlots();
48+
</script>
49+
50+
{#if proceedProps.visible}
51+
{#await AwaitedCodeHighlighter then CodeHighlighter}
52+
<CodeHighlighter
53+
style={proceedProps.elem_style}
54+
className={cls(proceedProps.elem_classes, 'ms-gr-antdx-code-highlighter')}
55+
id={proceedProps.elem_id}
56+
{...proceedProps.restProps}
57+
{...proceedProps.additionalProps}
58+
themeMode={proceedProps.gradio.shared.theme || 'light'}
59+
slots={slots.value}
60+
>
61+
{@render children?.()}
62+
</CodeHighlighter>
63+
{/await}
64+
{/if}

0 commit comments

Comments
 (0)