liubiren
/
Python
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Activity

1

This commit is contained in:
liubiren 2026-07-09 19:39:08 +08:00
parent 7c576e0036
commit 33fb9d3d34
8 changed files with 215 additions and 194 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
agent/application/application.py
View File

@ -22,13 +22,20 @@ app = rx.App(
},
"--devui-base-bg": "#ffffff",
"--mc-global-bg": "linear-gradient(to bottom, #D0C9FF 0%, #E6D6F0 8%, #F1DBEA 12%, #C8DCFB 40%, #ABC6F6 60%, #87AEFE 90%)",
"--mc-box-shadow": "rgba(25, 25, 25, .06)",
"--devui-icon-fill-weak": "#babbc0",
"--devui-border-radius-feedback": "4px",
"--devui-border-radius-card": "8px",
"--devui-font-size-sm": "11px",
"--devui-font-size": "12px",
"--font-family": "HuaweiFont,Helvetica,Arial,PingFangSC-Regular,Hiragino Sans GB,Microsoft YaHei,微软雅黑,Microsoft JhengHei",
"--devui-font-size-sm": "12px",
"--devui-font-size": "14px",
"--devui-font-size-lg": "14px",
"--devui-text": "#252b3a",
"--devui-text-weak": "#575d6c",
"--devui-light-text": "#ffffff",
"--placeholder": "#babbc0",
"--devui-aide-text": "#71757f",
"--devui-primary": "#5e7ce0",
} # 自定义主题颜色
) # 此处变量名需使用 app ，具体原因目前尚不清楚
# 注册首页路由

22
agent/application/assets/conversation.svg
View File

@ -1,22 +0,0 @@
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" fill="none">
<defs>
<linearGradient id="paint_linear_0" x1="20.4101181" x2="13.4623451" y1="22.4444809" y2="9.22279358" gradientUnits="userSpaceOnUse">
<stop stop-color="rgb(195.886,115.909,255)" offset="0" stop-opacity="1" />
<stop stop-color="rgb(120.545,222.545,255)" offset="0.91785866" stop-opacity="1" />
</linearGradient>
<linearGradient id="paint_linear_1" x1="21.1874924" x2="19.1952991" y1="7.64146042" y2="4.28173828" gradientUnits="userSpaceOnUse">
<stop stop-color="rgb(195.886,115.909,255)" offset="0" stop-opacity="1" />
<stop stop-color="rgb(120.545,222.545,255)" offset="0.91785866" stop-opacity="1" />
</linearGradient>
<linearGradient id="paint_linear_2" x1="16.3122597" x2="5.95285082" y1="20.5696716" y2="3.09911919" gradientUnits="userSpaceOnUse">
<stop stop-color="rgb(195.886,115.909,255)" offset="0" stop-opacity="1" />
<stop stop-color="rgb(120.545,222.545,255)" offset="0.91785866" stop-opacity="1" />
</linearGradient>
</defs>
<rect id="对话" width="24" height="24" x="0" y="0" />
<g id="组合 2745">
<path id="矢量 652" d="M11.1465 19.6708C12.2203 20.4478 13.5424 20.9059 14.9688 20.9059C15.8547 20.9059 16.699 20.7296 17.469 20.4101C18.2668 20.0796 20.9063 20.3121 20.9063 20.3121C20.9063 20.3121 20.6743 17.6733 21.006 16.8749C21.3237 16.1048 21.5 15.26 21.5 14.3746C21.5 12.2814 20.5166 10.4178 18.9835 9.22279C19.0763 9.73827 19.125 10.27 19.125 10.8121C19.125 15.4177 15.6298 19.207 11.1465 19.6708Z" fill="url(#paint_linear_0)" fill-rule="evenodd" />
<path id="路径 33备份" d="M20.0156 4.28174L19.6034 5.34381L18.5313 5.77253L19.6034 6.18613L20.0156 7.25049L20.4007 6.18613L21.5 5.77253L20.4007 5.34381L20.0156 4.28174Z" fill="url(#paint_linear_1)" fill-rule="evenodd" />
<path id="减去顶层" d="M17.9373 10.8179C17.9373 6.55492 14.4815 3.09912 10.2186 3.09912C5.95562 3.09912 2.49981 6.55492 2.49981 10.8179C2.49981 11.8645 2.70811 12.8624 3.0855 13.7725C3.47671 14.7159 3.20152 17.8349 3.20152 17.8349C3.20152 17.8349 6.32055 17.5597 7.26394 17.9509C8.17404 18.3283 9.17198 18.5366 10.2186 18.5366C14.4815 18.5366 17.9373 15.0808 17.9373 10.8179ZM8.80933 8.78985C9.43966 8.78985 9.95063 9.30087 9.95063 9.93115C9.95063 10.5614 9.43966 11.0725 8.80933 11.0725C8.179 11.0725 7.66803 10.5614 7.66803 9.93115C7.66803 9.30087 8.179 8.78985 8.80933 8.78985ZM13.5267 8.78985C14.1571 8.78985 14.668 9.30087 14.668 9.93115C14.668 10.5614 14.1571 11.0725 13.5267 11.0725C12.8964 11.0725 12.3854 10.5614 12.3854 9.93115C12.3854 9.30087 12.8964 8.78985 13.5267 8.78985Z" fill="url(#paint_linear_2)" fill-rule="evenodd" />
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.7 KiB

22
agent/application/assets/knowledge_base.svg
View File

@ -1,22 +0,0 @@
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" fill="none">
<defs>
<linearGradient id="paint_linear_0" x1="20.4101181" x2="13.4623451" y1="22.4444809" y2="9.22279358" gradientUnits="userSpaceOnUse">
<stop stop-color="rgb(195.886,115.909,255)" offset="0" stop-opacity="1" />
<stop stop-color="rgb(120.545,222.545,255)" offset="0.91785866" stop-opacity="1" />
</linearGradient>
<linearGradient id="paint_linear_1" x1="21.1874924" x2="19.1952991" y1="7.64146042" y2="4.28173828" gradientUnits="userSpaceOnUse">
<stop stop-color="rgb(195.886,115.909,255)" offset="0" stop-opacity="1" />
<stop stop-color="rgb(120.545,222.545,255)" offset="0.91785866" stop-opacity="1" />
</linearGradient>
<linearGradient id="paint_linear_2" x1="16.3122597" x2="5.95285082" y1="20.5696716" y2="3.09911919" gradientUnits="userSpaceOnUse">
<stop stop-color="rgb(195.886,115.909,255)" offset="0" stop-opacity="1" />
<stop stop-color="rgb(120.545,222.545,255)" offset="0.91785866" stop-opacity="1" />
</linearGradient>
</defs>
<rect id="对话" width="24" height="24" x="0" y="0" />
<g id="组合 2745">
<path id="矢量 652" d="M11.1465 19.6708C12.2203 20.4478 13.5424 20.9059 14.9688 20.9059C15.8547 20.9059 16.699 20.7296 17.469 20.4101C18.2668 20.0796 20.9063 20.3121 20.9063 20.3121C20.9063 20.3121 20.6743 17.6733 21.006 16.8749C21.3237 16.1048 21.5 15.26 21.5 14.3746C21.5 12.2814 20.5166 10.4178 18.9835 9.22279C19.0763 9.73827 19.125 10.27 19.125 10.8121C19.125 15.4177 15.6298 19.207 11.1465 19.6708Z" fill="url(#paint_linear_0)" fill-rule="evenodd" />
<path id="路径 33备份" d="M20.0156 4.28174L19.6034 5.34381L18.5313 5.77253L19.6034 6.18613L20.0156 7.25049L20.4007 6.18613L21.5 5.77253L20.4007 5.34381L20.0156 4.28174Z" fill="url(#paint_linear_1)" fill-rule="evenodd" />
<path id="减去顶层" d="M17.9373 10.8179C17.9373 6.55492 14.4815 3.09912 10.2186 3.09912C5.95562 3.09912 2.49981 6.55492 2.49981 10.8179C2.49981 11.8645 2.70811 12.8624 3.0855 13.7725C3.47671 14.7159 3.20152 17.8349 3.20152 17.8349C3.20152 17.8349 6.32055 17.5597 7.26394 17.9509C8.17404 18.3283 9.17198 18.5366 10.2186 18.5366C14.4815 18.5366 17.9373 15.0808 17.9373 10.8179ZM8.80933 8.78985C9.43966 8.78985 9.95063 9.30087 9.95063 9.93115C9.95063 10.5614 9.43966 11.0725 8.80933 11.0725C8.179 11.0725 7.66803 10.5614 7.66803 9.93115C7.66803 9.30087 8.179 8.78985 8.80933 8.78985ZM13.5267 8.78985C14.1571 8.78985 14.668 9.30087 14.668 9.93115C14.668 10.5614 14.1571 11.0725 13.5267 11.0725C12.8964 11.0725 12.3854 10.5614 12.3854 9.93115C12.3854 9.30087 12.8964 8.78985 13.5267 8.78985Z" fill="url(#paint_linear_2)" fill-rule="evenodd" />
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.7 KiB

BIN
agent/application/assets/logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 86 KiB

180
agent/application/components/conversation.py
View File

@ -38,49 +38,53 @@ def render_conversation_history_item(
),
# 渲染气泡卡片
rx.popover.content(
rx.box(
width="14px",
height="14px",
position="absolute",
top="-7px",
left="50%",
transform="translateX(-50%) rotate(45deg)",
background_color="var(--devui-base-bg, #ffffff)",
box_shadow="-2px -2px 4px rgba(0,0,0,0.05)",
),
rx.popover.close(
rx.vstack(
rx.box(
"删除",
width="100%", # 宽度
height="24px", # 高度
padding="4px", # 内边距
line_height="16px", # 行高
font_size="12px", # 字体大小
color="#252b3a",
display="flex", # 弹性布局
flex_wrap="wrap", # 换行
align_items="center", # 子元素垂直居中
background_color="var(--devui-base-bg)", # 背景颜色
white_space="nowrap", # 不换行
border_radius="var(--devui-border-radius-feedback)", # 圆角
# 点击事件：删除对话
on_click=lambda: ConversationState.delete_conversation(
conversation_id
),
position="absolute", # 绝对定位
width="8px", # 宽度
height="8px", # 高度
top="-12px", # 向上移动
left="50%", # 向左移动
transform="translateX(-50%) rotate(45deg)", # 旋转45度
background_color="#ffffff", # 背景颜色
box_shadow="-2px -2px 4px rgba(0,0,0,0.05)", # 阴影
),
rx.popover.close(
rx.box(
"删除",
width="100%", # 宽度
height="24px", # 高度
padding="4px", # 内边距
border_radius="4px", # 圆角
line_height="16px", # 行高
font_family="HuaweiFont,Helvetica,Arial,PingFangSC-Regular,Hiragino Sans GB,Microsoft YaHei,微软雅黑,Microsoft JhengHei", # 字体
font_size="12px", # 字体大小
color="#252b3a", # 字体颜色
style={
"_hover": {
"background_color": "#f2f2f3", # 鼠标悬停显示背景颜色
}
},
# 点击事件：删除对话
on_click=lambda: ConversationState.delete_conversation(
conversation_id
),
)
),
position="relative", # 相对定位
width="100%", # 宽度
),
position="relative", # 相对定位
align="center", # 水平居中对齐
padding="8px", # 内边距
arrow_size=10, # 三角大小
side="bottom", # 气泡在按钮下方，三角朝上
side_offset=8, # 气泡和按钮之间间距
align="center", # 水平居中对齐触发按钮中线
style={
"position": "relative", # 关键：给三角提供定位基准
"background_color": "var(--devui-base-bg, #ffffff) !important",
"border_radius": "var(--devui-border-radius-feedback, 8px) !important",
"box_shadow": "0 2px 12px rgba(0,0,0,0.1)",
},
border_radius="4px", # 圆角
background_color="#ffffff", # 背景颜色
box_shadow="0 2px 12px rgba(0,0,0,0.1)", # 阴影
overflow="visible", # 溢出可见
side="bottom", # 气泡卡片位于底部
side_offset=-2, # 偏移量
),
open_delay=0,
)
# 指定对话的激活状态
@ -356,64 +360,100 @@ def render_create_conversation_component() -> rx.Component:
)
def render_input_component() -> rx.Component:
def render_input_bar() -> rx.Component:
"""
渲染输入组件
渲染输入栏
"""
return rx.vstack(
# 渲染自定义输入组件
rx.form(
rx.box(
rx.vstack(
# 输入区域
rx.input(
name="user_prompt",
placeholder="发消息...",
flex="auto",
border="none", # 外框边线
outline="none", # 高亮轮廓线
padding_bottom="8px",
rx.hstack(
rx.text_area(
name="user_prompt",
placeholder="请输入您的问题，并按Enter发送，按Shift+Enter换行",
vertical_align="middle",
width="100%",
height="64px",
padding="4px 0",
background_color="var(--devui-base-bg)",
font_size="var(--devui-font-size)",
color="var(--devui-text)",
style={
"border": "none !important",
"outline": "none !important",
"boxShadow": "none !important",
},
),
width="100%",
padding="0 16px",
),
# 操作区域，暂仅包含发送按钮
rx.hstack(
rx.spacer(), # 占位符
# 发送按钮
rx.button(
rx.icon("arrow-up", size=18),
color_scheme="blue",
radius="full",
width="36px",
height="36px",
padding="0",
rx.icon(
"send",
margin_right="4px",
width="12px",
height="12px",
),
rx.text("发送"),
position="relative",
display="inline-flex",
padding="0 12px",
background_color="var(--devui-primary)",
border="none",
border_radius="20px",
align_items="center",
justify_content="center",
white_space="nowrap",
inline_height="1.5",
font_size="var(--devui-font-size)",
color="var(--devui-light-text)",
overflow="hidden",
cursor="pointer",
type="submit",
loading=ConversationState.get_running_status,
disabled=ConversationState.get_running_status,
),
width="100%",
justify_content="flex-end",
align_items="center",
height="32px",
padding="0 16px",
),
spacing="8",
padding_x="12px",
padding_y="12px",
),
border=f"1px solid {rx.color('mauve', 4)}",
radius="large",
background_color="white",
style={
"* textarea::placeholder": {
"fontFamily": "var(--font-family)",
"fontSize": "var(--devui-font-size)",
"color": "var(--placeholder)",
"opacity": 1,
},
},
),
max_width="50em", # 最大宽度
margin="0 auto", # 水平居中
align_items="center", # 子元素垂直居中
spacing="0", # 子元素间距
display="flex",
flex_direction="column",
width="100%",
padding="12px 0",
background_color="var(--devui-base-bg)",
border="none",
border_radius="16px",
box_shadow="0 1px 8px 0 var(--mc-box-shadow)",
on_submit=ConversationState.run,
reset_on_submit=True,
),
# 渲染底部文案
rx.text(
"内容由大模型生成，无法确保准确性和完整性，仅供参考",
margin_top="8px",
text_align="center",
font_size=".75em",
color=rx.color("mauve", 10),
font_size="12px",
color="var(--devui-aide-text)",
),
width="100%",
padding_x="16px",
align="stretch",
max_width="1200px",
padding="0 12px 12px",
align_items="center",
)

4
agent/application/components/frame.py
View File

@ -90,11 +90,11 @@ def render_sidebar() -> rx.Component:
render_brand_logo(),
# 渲染品牌名称
rx.text(
"MateAI",
"Gluballu",
line_height="20px", # 行高
font_size="11px",
font_weight="700",
color="var(--devui-base-text-dark)",
color="var(--devui-text)",
),
display="flex", # 弹性布局
flex_direction="column", # 垂直方向布局

167
agent/application/pages/conversation.py
View File

@ -7,7 +7,7 @@ import reflex as rx
from application.components.conversation import (
render_conversation_component,
render_conversation_history_item,
render_input_component,
render_input_bar,
render_create_conversation_component,
)
from application.state.conversation import ConversationState
@ -23,29 +23,25 @@ def render_conversation_page() -> rx.Component:
# 对话历史折叠面板打开状态
is_open = ConversationHistoryCollapseState.is_open
return rx.hstack(
# 渲染左侧
return rx.box(
rx.hstack(
# 若对话历史折叠面板打开则渲染，否则不渲染
rx.cond(
is_open,
# 渲染标题、搜索栏和对话历史列表
# 渲染对话历史
rx.box(
rx.vstack(
# 标题
rx.hstack(
rx.text(
"对话历史",
font_size="var(--devui-font-size-lg)", # 字体大小
font_weight="700", # 字体粗细
margin_bottom="8px", # 底部外边距
white_space="nowrap", # 不换行
margin_bottom="8px",
font_size="var(--devui-font-size-lg)",
font_weight="700",
white_space="nowrap",
),
display="flex", # 弹性布局
align_items="center", # 子元素垂直居中
justify_content="space-between", # 子元素两端对齐
display="flex",
align_items="center",
justify_content="space-between",
),
# 渲染搜索栏(暂未实现)
# 渲染对话历史列表
# 渲染列表
rx.vstack(
rx.foreach(
ConversationState.get_conversation_history,
@ -53,74 +49,93 @@ def render_conversation_page() -> rx.Component:
item[0], item[1]
),
),
flex="1", # 占满父元素高度
margin_top="8px", # 顶部外边距
width="100%", # 宽度
overflow="auto", # 允许溢出时显示垂直滚动条
align_items="stretch", # 子元素水平拉伸
flex="1",
margin_top="8px",
width="100%",
align_items="stretch",
overflow="hidden", # 禁用滚动条
),
display="flex",
flex_direction="column",
padding="12px",
height="100%",
background_color="#f9f9f9cc",
backdrop_filter="blur(50px)", # 背景模糊
background_color="#f9f9f9cc", # 背景颜色
display="flex", # 弹性布局
flex_direction="column", # 垂直方向布局
gap="12px", # 子元素间距
min_width="240px", # 最小宽度
max_width="380px", # 最大宽度
width="25%", # 宽度
height="100%", # 高度
padding="12px", # 内边距
gap="12px",
color="var(--devui-text)",
transition="all 0.3s ease-in-out", # 过渡动画
),
rx.fragment(),
width=rx.cond(is_open, "25%", "0px"),
min_width=rx.cond(is_open, "240px", "0px"),
max_width=rx.cond(is_open, "380px", "0px"),
height="100%",
overflow="hidden",
transition="all 0.3s ease-in-out",
),
rx.button(
rx.cond(
is_open,
rx.icon("chevron-left", size=16),
rx.icon("chevron-right", size=16),
# 渲染对话区域
rx.box(
rx.vstack(
# 渲染运行历史
render_conversation_component(),
# 渲染创建对话按钮
render_create_conversation_component(),
# 渲染输入栏
render_input_bar(),
display="flex",
flex_flow="column",
width="100%",
height="100%",
gap="8px",
align_items="center",
),
width="24px",
height="80px",
border_radius=rx.cond(is_open, "0 8px 8px 0", "9999px"),
background=rx.color("mauve", 2),
variant="ghost",
box_shadow="0 2px 8px rgba(0,0,0,0.08)",
on_click=ConversationHistoryCollapseState.toggle,
position="relative",
display="flex",
flex="1",
width="0",
height="100%",
background="linear-gradient(180deg, #fffffff2, #f8fafff2 99%)",
),
align_items="center",
height="100vh",
spacing="0",
position="relative",
display="flex",
flex="1",
height="100%",
min_height="0",
overflow="hidden",
transition="all 0.3s ease-in-out",
),
# 渲染右侧布局占位层
rx.box(
# 渲染内容排版层
rx.vstack(
# 渲染对话
render_conversation_component(),
# 渲染创建对话
render_create_conversation_component(),
# 渲染输入
render_input_component(),
width="100%", # 宽度
height="100%", # 高度
display="flex", # 弹性布局
flex_flow="column", # 垂直方向布局
align_items="center", # 子元素水平居中
gap="8px", # 子元素间距
# 渲染打开/关闭对话历史折叠面板按钮
rx.button(
rx.cond(
is_open,
rx.icon(
"chevron-left",
width="16px",
height="16px",
color="var(--devui-icon-fill-weak)",
),
rx.icon(
"chevron-right",
width="16px",
height="16px",
color="var(--devui-icon-fill-weak)",
),
),
background_color="linear-gradient(180deg, #fffffff2, #f8fafff2 99%)", # 背景颜色
position="relative", # 相对定位
display="flex", # 弹性布局
flex="1", # 分配父容器宽度
width="0", # 宽度
height="100%", # 高度
position="absolute",
top="50%",
left=rx.cond(is_open, "calc(clamp(240px, 25%, 380px) - 8px)", "0"),
z_index=99,
width="16px",
height="40px",
background="var(--devui-base-bg)",
box_shadow="var(--mc-float-block-shadow)",
border_radius=rx.cond(is_open, "6px", "0 6px 6px 0"),
transition="all 0.3s ease-in-out",
cursor="pointer",
# 点击事件：打开/关闭对话历史折叠面板
on_click=ConversationHistoryCollapseState.toggle,
),
position="relative", # 相对定位
flex="1", # 分配父容器宽度
display="flex", # 弹性布局
overflow="hidden", # 隐藏溢出内容
height="100%", # 高度
min_height="0", # 最小高度
border_radius="12px", # 圆角
position="relative",
width="100%",
height="100%",
border_radius="12px",
overflow="hidden", # 溢出隐藏
)

3
agent/assets/send.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.5105149,2.56164948 C14.1211149,2.35546948 14.7829149,2.68328948 14.9892149,3.29376948 C15.0349149,3.42925948 15.0552149,3.57159948 15.0495149,3.71368948 L15.0495149,3.71368948 L15.0351149,3.85546948 L13.6575149,12.2717195 C13.5237149,13.0892195 12.7524149,13.6435195 11.9348149,13.5097195 C11.8542149,13.4965195 11.7751149,13.4768195 11.6980149,13.4508195 L11.6980149,13.4508195 L11.5840149,13.4071195 L9.3049349,12.4260195 L8.4482449,13.5422195 C8.1958049,13.8708195 7.8205549,14.0786195 7.4128449,14.1207195 L7.4128449,14.1207195 L7.2585449,14.1286195 C6.4787649,14.1286195 5.8381349,13.5337195 5.7653849,12.7731195 L5.7653849,12.7731195 L5.7585449,12.6286195 L5.7602549,10.5258195 L5.7756349,10.4384195 L5.7944349,10.3824195 L5.8266649,10.3168995 L5.8735349,10.2503695 L5.9177249,10.2039195 L12.6909149,3.89392948 L2.3403349,7.38903948 C2.2329149,7.42529948 2.1418449,7.49676948 2.0808149,7.59063948 L2.0808149,7.59063948 L2.0412649,7.66497948 C1.9440949,7.89044948 2.0258749,8.14788948 2.2236349,8.27917948 L2.2236349,8.27917948 L2.3029749,8.32214948 L4.4799849,9.26177948 C4.7333949,9.37121948 4.8503449,9.66546948 4.7409649,9.91894948 C4.6435549,10.1443495 4.4003949,10.2616595 4.1694349,10.2081295 L4.1694349,10.2081295 L4.0837449,10.1798795 L1.9072249,9.24047948 C1.1462449,8.91284948 0.795166898,8.03039948 1.1225549,7.26953948 C1.2700249,6.92755948 1.5380849,6.65435948 1.8730449,6.50018948 L1.8730449,6.50018948 L2.0205049,6.44158948 Z M6.7578149,11.3299195 L6.7585449,12.6286195 L6.7666013,12.7185103 C6.80894095,12.9517898 7.0131049,13.1286195 7.2585449,13.1286195 C7.3828149,13.1286195 7.5014649,13.0824195 7.5925349,13.0008195 L7.5925349,13.0008195 L7.6550349,12.9332195 L8.3569349,12.0179195 L6.7578149,11.3299195 Z M13.9888149,4.05090948 L7.1599149,10.4129195 L11.9795149,12.4886195 C11.9980149,12.4966195 12.0173149,12.5035195 12.0369149,12.5093195 L12.0369149,12.5093195 L12.0964149,12.5228195 C12.3386149,12.5624195 12.5686149,12.4209195 12.6482149,12.1975195 L12.6482149,12.1975195 L12.6706149,12.1101195 L13.9888149,4.05090948 Z" stroke="currentColor" stroke-width="1"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB