import uuid
from dash import html, dcc
import feffery_antd_components as fac
import feffery_utils_components as fuc
from flask import session
from server import server # noqa: F401
# 绑定回调
import callbacks.aichat_c.aichat_c
def render():
return html.Div(
[
html.Div(
[
html.Div(
[
html.Div(
fac.AntdAvatar(
mode='image',
src='/assets/imgs/models-logo/deepseek.png',
size=32,
shape="square",
style={"background": "none"}
),
style={
"margin-right": 'calc(8px + 4px)',
"margin-left": 'calc(8px * 3)',
"display": 'flex'
},
className="chat-antdAvatar"
),
html.H4(
"果知小助手",
style={
"color": '#1f2329',
"font-size": '16px',
"font-style": 'normal',
"font-weight": 'hold',
"-webkit-font-smoothing": 'antialiased',
}
)
],
style={
"max-width": '860px',
"margin": '0 auto',
"display": 'flex',
"align-items": 'center',
"height": '56px'
},
className="chat-header-container"
),
],
style={
"background": 'linear-gradient(90deg, #ebf1ff 24.34%, #e5fbf8 56.18%, #f2ebfe 90.18%)',
"position": 'absolute',
"width": "100%",
"left": "0",
"top": "0",
"z-index": '3000',
"height": '56px',
"line-height": '56px',
"box-sizing": 'border-box',
"border-bottom": '1px solid #dee0e3',
},
className="chat-header"
),
html.Div(
[
html.Div([
# 聊天消息列表像素高度监听
fuc.FefferyListenElementSize(
id="listen-chat-data-list-height", target="chat_list_div"
),
html.Div(
[html.Div([
html.Div([
fac.AntdAvatar(
mode='image',
src='/assets/imgs/logo2.png',
className='avatar',
style={
"float": "left",
"height": "30px"
}
),
html.Div(
fac.AntdCard(
"您好，我是 果知小助手，您可以向我提出关于 果知的相关问题。",
style={
"box-shadow": '0px 2px 4px 0px rgba(31, 35, 41, .12)',
"border": 'none',
"border-radius": '8px',
"box-sizing": 'border-box',
},
headStyle={'display': 'none'}
),
className="content",
style={
"padding-left": '40px'
}
)
],
className="item-content",
style={
"margin-bottom": 'calc(8px * 2)'
}
)
],
id="chat-content",
className="chat-content",
style={
"padding": '0px calc(8px * 3)',
"max-width": '100%',
# "width": '80%',
# "height": '100%',
"margin": '0 auto',
"padding-top": 0,
"box-sizing": 'border-box'
}
),
dcc.Store(id="current_problem", data=""),
dcc.Store(id="current_files", data=[]),
dcc.Store(id="chat_data_list", data=[]),
dcc.Store(id="answer_list", data=[]),
dcc.Download(id="down_load_chat_file"),
html.Div(
id="chat_list_div",
style={
"padding": '0px 24px 24px',
"max-width": '100%',
# "width": '80%',
# "height": '100%',
"margin": '0px auto',
"box-sizing": 'border-box'
}
)
],
style={
"height": '100%',
'maxHeight': 'calc(100vh - 180px)',
'overflow': 'auto',
},
# autoHide=False,
# forceVisible=True,
id="chat-scrollbar",
className="chat-scrollbar"
),
html.Div(
[ # shift+enter事件监听
fuc.FefferyKeyPress(id="control-enter-keypress", keys="ctrl.enter"),
# enter事件监听
fuc.FefferyKeyPress(id="aichat_enter-keypress", keys="enter"),
dcc.Store(id="current_machine", data=None),
html.Div(
fac.AntdButton(
[
fac.AntdIcon(
icon='antd-arrow-up'
),
'导入文件',
],
type='link',
id='ai_chat_upload',
),
style={"width": "100%", "max-width": "860px", "margin": "0 auto"}
),
html.Div(
id='file_tags',
style={"width": "100%", "max-width": "860px", "margin": "0 auto"}
),
html.Div(
fac.AntdRow(
id="selected-machine-container",
justify="space-between",
align="middle",
style={
"padding": "8px 12px 8px 16px",
"display": "none",
"borderRadius": "8px",
"background": "#f6f7f9",
"max-width": "860px",
"width": "auto",
"border": "1px solid #d9d9d9",
"margin": "auto",
"margin-bottom": "5px"
}
),
style={
"width": "100%",
"justify-content": "center"
}
),
fac.AntdPopover(
html.Div(
[
fac.AntdInput(
placeholder="请输入问题，@键选择机器人，Ctrl+Enter 换行，Enter发送",
bordered=False,
mode="text-area",
autoSize={'minRows': 1, 'maxRows': 4},
style={
"padding": '12px 16px',
"scrollbar-width": 'none'
},
className="chat-textarea",
id="chat-textarea",
),
html.Div(
fac.AntdButton(
children=(
html.Img(
src="/assets/imgs/icon_send.svg",
style={
"height": '24px'
},
),
),
id="sent-button",
type='text',
className="sent-button",
style={
"max-height": 'none',
}
),
className="operate",
style={
"padding": '6px 10px',
"display": 'flex',
"align-items": 'center'
}
),
],
className="operate-textarea",
id="operate-textarea",
style={
"box-shadow": '0px 6px 24px 0px rgba(31, 35, 41, 0.08)',
"background-color": '#ffffff',
"border-radius": '8px',
"border": '1px solid #ffffff',
"box-sizing": 'border-box',
"display": 'flex',
"max-width": '860px',
"margin": '0 auto',
}
),
id="choose_machine_popover",
content=fac.AntdSpace(
[
fac.AntdRow(
[
fac.AntdText(
"选择智能体",
style={
"fontSize": 16, "color": "#646c79", "fontWeight": "bold"
}
),
fac.AntdButton(
id="close-agents-panel",
icon=fac.AntdIcon(icon="antd-close"),
type="text",
),
],
justify="space-between",
align="middle",
),
fac.AntdSpace(
[
html.Div(
fac.AntdSpace(
[
fac.AntdAvatar(
src="/assets/imgs/智能体logo.jpg", mode="image"
),
fac.AntdText(
"元数据专家", style={"fontSize": 16}
),
# fac.AntdText(
# f"示例智能体{i}功能介绍balabalabalabala",
# style={"fontSize": 12, "color": "#b0b7c0"},
# ),
],
className="agent-item",
),
id={"type": "machine-item", "index": "元数据专家"},
),
html.Div(
fac.AntdSpace(
[
fac.AntdAvatar(
src="/assets/imgs/智能体logo.jpg", mode="image"
),
fac.AntdText(
"数据标准专家", style={"fontSize": 16}
),
# fac.AntdText(
# f"示例智能体{i}功能介绍balabalabalabala",
# style={"fontSize": 12, "color": "#b0b7c0"},
# ),
],
className="agent-item",
),
id={"type": "machine-item", "index": "数据标准专家"},
),
html.Div(
fac.AntdSpace(
[
fac.AntdAvatar(
src="/assets/imgs/智能体logo.jpg", mode="image"
),
fac.AntdText(
"数据质量专家", style={"fontSize": 16}
),
# fac.AntdText(
# f"示例智能体{i}功能介绍balabalabalabala",
# style={"fontSize": 12, "color": "#b0b7c0"},
# ),
],
className="agent-item",
),
id={"type": "machine-item", "index": "数据质量专家"},
),
html.Div(
fac.AntdSpace(
[
fac.AntdAvatar(
src="/assets/imgs/智能体logo.jpg", mode="image"
),
fac.AntdText(
"数据模型专家", style={"fontSize": 16}
),
# fac.AntdText(
# f"示例智能体{i}功能介绍balabalabalabala",
# style={"fontSize": 12, "color": "#b0b7c0"},
# ),
],
className="agent-item",
),
id={"type": "machine-item", "index": "数据模型专家"},
),
html.Div(
fac.AntdSpace(
[
fac.AntdAvatar(
src="/assets/imgs/智能体logo.jpg", mode="image"
),
fac.AntdText(
"数据安全专家", style={"fontSize": 16}
),
# fac.AntdText(
# f"示例智能体{i}功能介绍balabalabalabala",
# style={"fontSize": 12, "color": "#b0b7c0"},
# ),
],
className="agent-item",
),
id={"type": "machine-item", "index": "数据安全专家"},
),
html.Div(
fac.AntdSpace(
[
fac.AntdAvatar(
src="/assets/imgs/智能体logo.jpg", mode="image"
),
fac.AntdText(
"数据分析专家", style={"fontSize": 16}
),
# fac.AntdText(
# f"示例智能体{i}功能介绍balabalabalabala",
# style={"fontSize": 12, "color": "#b0b7c0"},
# ),
],
className="agent-item",
),
id={"type": "machine-item", "index": "数据分析专家"},
),
html.Div(
fac.AntdSpace(
[
fac.AntdAvatar(
src="/assets/imgs/智能体logo.jpg", mode="image"
),
fac.AntdText(
"数据治理管理专家", style={"fontSize": 16}
),
# fac.AntdText(
# f"示例智能体{i}功能介绍balabalabalabala",
# style={"fontSize": 12, "color": "#b0b7c0"},
# ),
],
className="agent-item",
),
id={"type": "machine-item", "index": "数据治理管理专家"},
),
],
direction="vertical",
style={"width": "100%",
"maxWidth": 860,
"maxHeight": 200,
"overflow": "auto"},
className="machine_list_clazz"
),
],
direction="vertical",
style={"width": "100%", "max-width": "860px"},
),
permanent=True,
arrow="hide",
trigger="click",
zIndex=99999,
overlayStyle={"width": "100%", "max-width": "860px"},
overlayInnerStyle={"padding": "5px 8px"},
),
],
className="chat-operate",
style={
"background": '#f3f7f9',
"position": 'relative',
"width": '100%',
"box-sizing": 'border-box',
"z-index": '10',
"padding-top": '12px',
"padding": '24px'
}
)
],
style={
"height": '100%',
"display": 'flex',
"flex-direction": 'column',
"box-sizing": 'border-box',
"position": 'relative',
"color": '#1f2329',
},
className="AiChat-embed"
)
],
style={
"padding-top": '80px',
"height": 'calc(100% - 80px)',
"max-height": 'calc(100% - 80px)',
"overflow": 'hidden',
"z-index": '90'
},
className="chat-main"
),
html.Div(
[dcc.Store(id="chat-history-list"),
fac.AntdButton(
id="new-chat-window",
children=(
fac.AntdIcon(
style={"color": "#909399"},
icon="antd-plus",
)
),
type='link',
style={
"font-size": "20px",
"padding": '8px'
}
),
fac.AntdButton(
id='chat-history-show-button',
children=(
fac.AntdIcon(
style={"color": "#909399"},
icon="antd-history",
)
),
type='link',
style={
"font-size": "20px",
"padding": '8px'
}
),
],
style={
"color": '#646a73',
"cursor": 'pointer',
"z-index": '3000',
"position": 'absolute',
"top": '16px',
"right": '85px',
"font-size": '18px',
},
className="chat-popover-button-history"
),
dcc.Store(id="show_chat_history", data={'show_chat_history': False}),
fac.AntdCollapse(
id="chat-history-collapse",
isOpen=False,
forceRender=True,
children=html.Div(
[
html.Div(
html.Span("历史记录"),
style={
"border-bottom": '1px solid #dee0e3',
"padding": '16px 24px',
"font-size": "14px"
}
),
fuc.FefferyScrollbars(
[
html.Div(
id="chat-history-p8",
className="chat-history-p8",
style={
"padding": '8px'
}
),
html.Div(
html.Span("仅显示最近 20 条对话"),
style={
"position": 'relative',
"text-align": 'center',
"color": '#8f959e',
"font-weight": 400,
"margin-top": '8px',
"font-size": '14px'
},
className="gradient-divider"
)
],
className="chat-history-scrollbar",
id="chat-history-scrollbar",
style={
"max-height": "300px"
}
)
],
className="chat-history-popover",
id="chat-history-popover",
style={
# "visibility": 'hidden',
# "position": "absolute",
# "top": '56px',
# "background": '#ffffff',
"padding-bottom": '24px',
# "width": '100%'
}
),
style={
"z-index": '2009',
"width": '100%',
"background": '#ffffff',
# "padding-bottom": '24px',
"position": "absolute",
"top": '0px',
}
),
html.Div(
fuc.FefferyDiv(
id='chat-history-cover-child',
style={
'height': '100%',
'width': '100%'
}
),
id="chat-history-cover",
style={
"z-index": '95',
"width": '100%',
"height": '100%',
"position": 'absolute',
"left": '0px',
"top": '0px',
"background": '#747374',
"filter": 'alpha(opacity=60)',
"opacity": 0.6,
"display": 'none'
}
),
fac.AntdModal(
id='ai-chat-file-modal',
visible=False,
title='文件导入',
width=600,
renderFooter=True,
centered=True,
okText='确定',
confirmAutoSpin=True,
zIndex=99999
),
],
style={"background": "#f5f6f7", "overflow": "hidden", "width": "100%", "height": "100%"}
)