feat: 徽智制联-deepSeek-增加loading效果+部分样式调整

 
 
 .mark-down {
 .mark-down {
   width: auto;
   width: auto;
-  max-width: 355px;
+  max-width: 320px;
   background: #fff;
   background: #fff;
   border-radius: 15px;
   border-radius: 15px;
   padding: 12px 28px 12px 16px;
   padding: 12px 28px 12px 16px;

@@ -58,6 +58,7 @@ const example_2 = [
 
 
 const DeepSeekIndex: React.FC = () => {
 const DeepSeekIndex: React.FC = () => {
     const [searchValue, setSearchValue] = useState<any>();
     const [searchValue, setSearchValue] = useState<any>();
+    const [loading, setLoading] = useState<boolean>(false);
     const [disabled, setDisabled] = useState<boolean>(false);
     const [disabled, setDisabled] = useState<boolean>(false);
     const [exampleFlag, setExampleFlag] = useState<string>('1')
     const [exampleFlag, setExampleFlag] = useState<string>('1')
 
 
@@ -96,6 +97,7 @@ const DeepSeekIndex: React.FC = () => {
 
 
     const send = async (_searchValue?: string) => {
     const send = async (_searchValue?: string) => {
         if (disabled) return;
         if (disabled) return;
+        setLoading(true)
         setDisabled(true);
         setDisabled(true);
         console.log('searchValue', searchValue)
         console.log('searchValue', searchValue)
         const _value = _searchValue ? _searchValue : searchValue;
         const _value = _searchValue ? _searchValue : searchValue;
@@ -144,6 +146,7 @@ const DeepSeekIndex: React.FC = () => {
                 buffer += decoder?.decode(value, {stream: true});
                 buffer += decoder?.decode(value, {stream: true});
                 const lines: any[] = buffer?.split('\n');
                 const lines: any[] = buffer?.split('\n');
                 buffer = lines?.pop();
                 buffer = lines?.pop();
+                setLoading(false)
                 lines?.forEach(line => {
                 lines?.forEach(line => {
                     if (line.startsWith('data:')) {
                     if (line.startsWith('data:')) {
                         const data = JSON.parse(line?.slice(5)?.trim());
                         const data = JSON.parse(line?.slice(5)?.trim());
@@ -162,6 +165,7 @@ const DeepSeekIndex: React.FC = () => {
 
 
         } catch (error) {
         } catch (error) {
             console.error('Stream error:', error);
             console.error('Stream error:', error);
+            setLoading(false)
         }
         }
 
 
     }
     }
@@ -222,6 +226,13 @@ const DeepSeekIndex: React.FC = () => {
 
 
                     </div>
                     </div>
                 ))}
                 ))}
+                {
+                    loading ? <div className="content-left">
+                        <div className={'current-think'}>
+                            思考中...
+                        </div>
+                    </div> : ''
+                }
                 {currentResponse ? (
                 {currentResponse ? (
                     <div className="content-left">
                     <div className="content-left">
                         <Markdown content={currentResponse || ''}/>
                         <Markdown content={currentResponse || ''}/>
@@ -237,7 +248,7 @@ const DeepSeekIndex: React.FC = () => {
                     onChange={(val: string) => setSearchValue(val)}
                     onChange={(val: string) => setSearchValue(val)}
                     onKeyDown={handleKeyDown}
                     onKeyDown={handleKeyDown}
                 />
                 />
-                <Button className={`deep-seek_footer-send ${disabled ? 'disabled' : ''}`} color={'primary'} onClick={() =>send}>发送</Button>
+                <Button className={`deep-seek_footer-send ${disabled ? 'disabled' : ''}`} color={'primary'} onClick={() =>send()}>发送</Button>
             </div>
             </div>
 
 
         </div>
         </div>

@@ -157,7 +157,7 @@
     padding: 12px 16px;
     padding: 12px 16px;
     line-height: 22px;
     line-height: 22px;
     width: auto;
     width: auto;
-    max-width: 355px;
+    max-width: 320px;
     border-radius: 15px;
     border-radius: 15px;
     font-size: 16px;
     font-size: 16px;
     color: #1C1C1C;
     color: #1C1C1C;
@@ -166,6 +166,18 @@
 .content-left {
 .content-left {
   display: flex;
   display: flex;
   padding-left: 10px;
   padding-left: 10px;
+  .current-think {
+    display: inline-block;
+    background: #fff;
+    padding: 12px 16px;
+    line-height: 22px;
+    width: auto;
+    max-width: 320px;
+    border-radius: 15px;
+    font-size: 16px;
+    color: #aaa;
+
+  }
   .mark-down {
   .mark-down {
     p {
     p {
       overflow-wrap:break-word;
       overflow-wrap:break-word;