소스 검색

fix: 聊天框底部适配,欢迎框底部对齐

王晓东 1 주 전
부모
커밋
952913ebff

+ 2 - 2
src/components/LoginPopup/index.tsx

@@ -48,8 +48,8 @@ export default function Index({showPopup, setShowPopup, onEnd}:IProps) {
 
   return (
     <Popup setShow={setShowPopup} show={showPopup}>
-      <View className="text-24 font-medium leading-36 text-black mb-12">欢迎来到小蓝本智能体</View>
-      <View className="text-gray-45 text-14 leading-24 mb-40">
+      <View className="text-24 text-center font-medium leading-36 text-black mb-12">欢迎来到小蓝本智能体</View>
+      <View className="text-gray-45 text-center text-14 leading-24 mb-40">
         <View>激活您的AI商务分身,开启智能商务</View>
         <View>7x24h随时应答·智能管理知识库·主动拓展人脉</View>
       </View>

+ 1 - 1
src/components/TabPageCheckLogin/index.tsx

@@ -34,7 +34,7 @@ const TabPageCheckLogin = forwardRef(({ onEnd }: IProps, ref) => {
     checkLogin()
   }, [isLogin])
 
-  return  <LoginPopup showPopup={true} setShowPopup={setShowLogin} onEnd={onLoginEnd}></LoginPopup>
+  return  <LoginPopup showPopup={showLogin} setShowPopup={setShowLogin} onEnd={onLoginEnd}></LoginPopup>
 });
 
 export default TabPageCheckLogin;

+ 1 - 0
src/components/wemeta-tabs/TabBarButtons.tsx

@@ -5,6 +5,7 @@ import style from "./index.module.less";
 
 interface Props {
   current: string;
+  className?: string
   onTabIndexChange: (index:string) => void
   list: {
     key: string;

+ 11 - 0
src/pages/agent/index.module.less

@@ -0,0 +1,11 @@
+.tabContainer{
+  display: flex;
+  position: fixed;
+  top: 12px;
+  left: 0;
+  z-index: 400;
+  padding: 0 16px;
+  width: 100%;
+  box-sizing: border-box;
+  align-items: center;
+}

+ 7 - 7
src/pages/agent/index.tsx

@@ -10,10 +10,13 @@ import { useEffect, useState } from "react";
 import { useDidShow, useRouter } from "@tarojs/taro";
 import { useComponentStore } from "@/store/componentStore";
 import { useUserStore } from "@/store/userStore";
+import { useAppStore } from "@/store/appStore";
+import style from './index.module.less'
 
 export default function Index() {
   const [tabIndex, setTabIndex] = useState('1');
   const router = useRouter();
+  const headerHeight = useAppStore((state) => state.headerHeight);
   const agentId = router.params.agentId;
   const { fetchAgent } = useAgentStore();
   const { fetchMyEntList } = useUserStore();
@@ -47,21 +50,18 @@ export default function Index() {
     agentId && fetchAgentDetail(agentId);
   })
 
-  // useEffect(() => {
-  //   agentId && fetchAgentDetail(agentId);
-  // }, [agentId]);
-
   return (
     <PageCustom>
       <NavBarNormal scrollFadeIn backText="创建"></NavBarNormal>
       <View className="px-16 w-full flex flex-col gap-20">
-        <View className="w-full">
-          <TabBarButtons
+        {/* <View className={style.tabContainer} style={{top: (headerHeight) + 'px'}}>
+          
+        </View> */}
+        <TabBarButtons
             current={tabIndex}
             list={tabList}
             onTabIndexChange={handleTabIndexChange}
           ></TabBarButtons>
-        </View>
         <View className={`${tabIndex === "1" ? "block" : "hidden"}`}>
           <AgentSetting></AgentSetting>
         </View>

+ 8 - 6
src/pages/chat/components/chat-welcome/index.module.less

@@ -1,8 +1,10 @@
 .container{
-  padding: 24px 16px;
-  height: 448px;
-  border-top-left-radius: 24px;
-  border-top-right-radius: 24px;
-  background: linear-gradient( rgba(#fff, .5) 1%, rgba(#fff, .1) 100%);
-  backdrop-filter: blur(38px);
+  position: absolute;
+  bottom: 0px;
+  left: 16px;
+  right: 16px;
+  z-index: 1;
+  padding: 12px 16px 16px;
+  background: #FFFFFF;
+  border-radius: 0 10px 10px 10px;
 }

+ 34 - 32
src/pages/chat/components/chat-welcome/index.tsx

@@ -1,14 +1,12 @@
-
-import { View } from '@tarojs/components'
-import style from './index.module.less'
-import PersonalCard from '../personal-card'
-import MessageRobotPlain from '@/components/chat-message/MessageRobotPlain'
-import { TAgentDetail } from '@/types/agent';
-import { useChatInput } from '../input-bar/chatInput';
+import { View } from "@tarojs/components";
+import style from "./index.module.less";
+import PersonalCard from "../personal-card";
+import { TAgentDetail } from "@/types/agent";
+import { useChatInput } from "../input-bar/chatInput";
 interface IProps {
   agent: TAgentDetail | null;
 }
-export default ({agent}: IProps)=> {
+export default ({ agent }: IProps) => {
   const { handleOnSend } = useChatInput({
     agent,
   });
@@ -17,36 +15,40 @@ export default ({agent}: IProps)=> {
     handleOnSend(q);
   };
 
-  
-  if(!agent){
-    return <></>
+  if (!agent) {
+    return <></>;
   }
 
-  let greeting = ''
+  let greeting = "";
   // 默认打招呼文案
-  if(!agent.greeting){
-    greeting = `Hi~ 你好我是${agent.name}`
-  }else{
+  if (!agent.greeting) {
+    greeting = `Hi~ 你好我是${agent.name}`;
+  } else {
     // 用户自定义文案
-    greeting = agent.greeting
+    greeting = agent.greeting;
   }
 
   // 3个引导提问提示词
-  const questions = agent.questionGuides ?? []
-  
+  const questions = agent.questionGuides ?? [];
+
   return (
-    <View className='pt-118'>
     <View className={style.container}>
-        <View className='mb-24'>
-          <PersonalCard agent={agent} />
-        </View>
-        <View className='flex flex-col gap-8'>
-          <MessageRobotPlain text={greeting}/>
-          {questions.map(q => {
-            return <MessageRobotPlain text={q} onClick={handleClick} />
-          })}
-        </View>
-    </View> 
-   </View>
-  )
-}
+      {/* <View className="mb-24">
+        <PersonalCard agent={agent} />
+      </View> */}
+      <View className="flex flex-col gap-8">
+        <View className="text-[#111A34] text-14 leading-28 mb-18">{greeting}</View>
+        {questions.map((q) => {
+          return (
+            <View
+              className="p-12 rounded-8 leading-22 text-12 bg-[#F4F9FF] text-[#414A64]"
+              onClick={() => handleClick(q)}
+            >
+              {q}
+            </View>
+          );
+        })}
+      </View>
+    </View>
+  );
+};

+ 7 - 12
src/pages/chat/index.tsx

@@ -25,6 +25,7 @@ import {useKeyboard} from './components/keyboard'
 
 export default function Index() {
   const router = useRouter();
+  const bottomSafeHeight = useAppStore((state) => state.bottomSafeHeight);
   const { agentId, isVisitor } = router.params;
   if (!agentId) {
     return <View>没有相应的智能体</View>;
@@ -138,9 +139,7 @@ const agent = useAgentStore((state) => {
         onClick={() => Taro.navigateBack()}
       >
         <IconArrowLeft />
-        <View className={showWelcome ? "hidden" : "block"}>
-          <PersonalCard agent={agent} size="mini" />
-        </View>
+        <PersonalCard agent={agent} size="mini" />
       </View>
     );
   };
@@ -175,7 +174,7 @@ const agent = useAgentStore((state) => {
       <NavBarNormal blur leftColumn={renderNavLeft}></NavBarNormal>
       {renderTopBg()}
       <View
-        className="flex flex-col w-full h-screen relative z-10"
+        className="flex flex-col w-full h-full relative z-10"
         style={{ marginTop: `${marginTopOffset}px` }}
       >
         <ScrollView
@@ -206,16 +205,12 @@ const agent = useAgentStore((state) => {
               );
             })}
           </View>
-          <View className="pb-140 pt-8">
+          <View className="pb-80 pt-8">
           {(agent) &&  <RecommendQuestions agent={agent} />}
           </View>
         </ScrollView>
-        <View className="h-140 w-10"></View>
         <View
-          className="bottom-bar px-16 pt-12 z-50"
-          style={{
-            bottom: `${keyboardHeight}px`,
-          }}
+          className="w-full"
         >
           {/* <View
             onClick={switchDeepThink}
@@ -227,16 +222,16 @@ const agent = useAgentStore((state) => {
           >
             深度思考(R1)
           </View> */}
+          <View className="px-16 py-12 bg-[#F5FAFF]">
           {agent && (
-            <View className="bg-[#F5FAFF]">
               <InputBar
                 aiModel={deepThink}
                 agent={agent}
                 histories={list}
                 setShowWelcome={setShowWelcome}
               ></InputBar>
-            </View>
           )}
+          </View>
         </View>
       </View>
     </PageCustom>

+ 9 - 3
src/pages/contact/index.tsx

@@ -27,7 +27,7 @@ export default function Index() {
     });
     return res.data;
   };
-
+  const [totalCount, setTotalCount] = useState<number>(0);
   const getKey = (pageIndex:number, previousPageData) => {
     if (pageIndex === 0)
       return [
@@ -44,7 +44,7 @@ export default function Index() {
     }
     return null;
   };
-  const {list, setSize, mutate} = useLoadMoreInfinite<TContactItem[]>(getKey, fetcher)
+  const {data, list, setSize, mutate, pageIndex} = useLoadMoreInfinite<TContactItem[]>(getKey, fetcher)
 
 
   const handleSearchBarChanged = (v: string) => {
@@ -90,6 +90,12 @@ export default function Index() {
   const onLoginEnd = ()=> {
     mutate()
   }
+
+  useEffect(() => {
+    if(data &&  pageIndex === 1) {
+      setTotalCount(data?.[0].totalCount || 0)
+    }
+  }, [data, pageIndex]);
   
 
   const handleDelete = (contactId: string|number) => {
@@ -158,7 +164,7 @@ export default function Index() {
         </View>
         <View className="rounded-container-header"></View>
         <View className="px-16 text-gray-45 text-12 leading-20 mb-20">
-          共 4 个联系人 
+          共 {totalCount} 个联系人 
         </View>
         <ScrollView
           scrollY

+ 4 - 3
src/pages/index/components/WelcomeTips/index.module.less

@@ -72,15 +72,16 @@
   padding: 16px;
   min-height: 184px;
   margin-bottom: 16px;
-  background-image: linear-gradient(120deg, #f2fcff 0%, #EBF5FF 49%, #E2EAFF 100%);
+  background-image: linear-gradient(45deg, #f2fcff 0%, #EBF5FF 49%, #E2EAFF 100%);
   border-radius: 8px;
 }
 
 .headline {
-  margin-bottom: 10px;
+  margin-bottom: 16px;
   font-weight: 500;
   font-size: 16px;
-  line-height: 24px;
+  line-height: 26px;
+  white-space: nowrap;
 }
 
 .list {

+ 1 - 1
src/pages/index/components/WelcomeTips/index.tsx

@@ -46,7 +46,7 @@ export default function Index({}: IProps) {
           <View className={style.boxInner}>
             <View className={style.headline}>
               <View>开启你的专属 AI 分身,</View>
-              <View>让客户随时随地了解你和你的解决方案</View>
+              <View>让客户随时随地了解你和你的解决方案</View>
             </View>
             <View className={style.list}>
                 <View className="flex items-center gap-6">

+ 2 - 2
src/pages/knowledge/components/AsistantMessage/index.tsx

@@ -3,10 +3,10 @@ import WeComQRcode from "@/components/WeComQRcode";
 export const WelcomeCard = () => {
   return (
     <View>
-      <View>
+      <View className="font-medium text-black leading-28 mb-4 text-14">
         Hi~我是你的 AI 小助手!
-        请将资料发送到我的企业微信,我会自动为你解析内容,并同步到这里。
       </View>
+      <View className="font-normal text-[#414A64] leading-24 text-12">请将资料发送到我的企业微信,我会自动为你解析内容,并同步到这里。</View>
       <WeComQRcode />
     </View>
   );

+ 11 - 1
src/pages/knowledge/components/PersonalTab/components/ScrollListChat.tsx

@@ -38,6 +38,7 @@ const Index = ({assistantOnly, setTotalCount}: IProps) => {
   const [scrollTop, setScrollTop] = useState(9999)
 
   const { isMutate, setLoginShow } = useContext(LoginMutationContext)
+  const [showAsistantGreeting, setShowAsistantGreeting] = useState(false)
   
 
   const fetcher = async ([_url, {nextId, pageSize}]) => {
@@ -126,6 +127,15 @@ const Index = ({assistantOnly, setTotalCount}: IProps) => {
     }
   }, [data, pageIndex]);
   
+  let timer:any = undefined
+  useEffect(()=> {
+    timer = setTimeout(()=> {
+      setShowAsistantGreeting(reversedList.length <= 0)
+    }, 1000)
+    return ()=> {
+      clearTimeout(timer)
+    }
+  }, [reversedList])
 
   return (
     <ScrollView
@@ -139,7 +149,7 @@ const Index = ({assistantOnly, setTotalCount}: IProps) => {
     >
       <View className="flex flex-col gap-20 pb-80 px-16">
         {/* 欢迎语 */}
-        {(reversedList.length <= 0) && <MessageRobotRich data={DEFAULT_AGENT}><WelcomeCard /></MessageRobotRich>}
+        {(showAsistantGreeting) && <MessageRobotRich data={DEFAULT_AGENT}><WelcomeCard /></MessageRobotRich>}
 
 
         {reversedList.map((group) => {