first commit

webapp/packages/chat-sdk/src/demo/Chat.tsx

@@ -0,0 +1,41 @@
+import { Input } from 'antd';
+import styles from './style.module.less';
+import { useState } from 'react';
+import ChatItem from '../components/ChatItem';
+import { queryContext, searchRecommend } from '../service';
+
+const { Search } = Input;
+
+const Chat = () => {
+  const [inputMsg, setInputMsg] = useState('');
+  const [msg, setMsg] = useState('');
+
+  const onInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { value } = e.target;
+    setInputMsg(value);
+    searchRecommend(value);
+  };
+
+  const onSearch = () => {
+    setMsg(inputMsg);
+    queryContext(inputMsg);
+  };
+
+  return (
+    <div className={styles.page}>
+      <div className={styles.inputMsg}>
+        <Search
+          placeholder="请输入问题"
+          value={inputMsg}
+          onChange={onInputChange}
+          onSearch={onSearch}
+        />
+      </div>
+      <div className={styles.chatItem}>
+        <ChatItem msg={msg} suggestionEnable isLastMessage />
+      </div>
+    </div>
+  );
+};
+
+export default Chat;

webapp/packages/chat-sdk/src/demo/style.module.less

@@ -0,0 +1,11 @@
+.page {
+  display: flex;
+  flex-direction: column;
+  row-gap: 20px;
+  padding: 30px;
+  background:
+    linear-gradient(180deg,rgba(23,74,228,0) 29.44%,rgba(23,74,228,.06)),linear-gradient(90deg,#f3f3f7,#f3f3f7 20%,#ebf0f9 60%,#f3f3f7 80%,#f3f3f7);
+  height: 100vh;
+  overflow: auto;
+  box-sizing: border-box;
+}