Feature/ai feat 新增接入阿里云百炼模型 AI页面施工

.env.development

@@ -0,0 +1,4 @@
+MODEL_API_BASE_URL=https://dashscope.aliyuncs.com/api/v1/apps/
+
+QWEN_APP_ID=
+QWEN_AUTH=

.gitignore

@@ -35,4 +35,8 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 
-*storybook.log
+*storybook.log
+
+/.idea/
+
+/.vscode/

next.config.mjs

@@ -5,6 +5,36 @@ const nextConfig = {
   eslint: {
     ignoreDuringBuilds: true,
   },
+  compress: false, // 禁用gzip压缩
+  async rewrites() {
+    return [
+      {
+        source: '/ai/:path*',
+        destination: `${process.env.MODEL_API_BASE_URL}${process.env.QWEN_APP_ID}/:path*`, // 你想要代理的外部 API
+      },
+    ];
+  },
+  async headers() {
+    return [
+      {
+        source: '/ai/:path*',
+        headers: [
+          {
+            key: 'Content-Type',
+            value: 'application/json',
+          },
+          {
+            key: 'Authorization',
+            value: `Bearer ${process.env.QWEN_AUTH}`,
+          },
+          {
+            key: 'Accept',
+            value: `text/event-stream`,
+          },
+        ],
+      },
+    ]
+  },
 };
 
 export default withNextDevtools(nextConfig);

package.json

@@ -24,6 +24,7 @@
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/sortable": "^8.0.0",
     "@giscus/react": "^3.0.0",
+    "@microsoft/fetch-event-source": "^2.0.1",
     "@monaco-editor/react": "^4.6.0",
     "@radix-ui/react-accordion": "^1.2.0",
     "@radix-ui/react-avatar": "^1.1.0",

src/app/edit/(main)/(router)/ai/page.tsx

@@ -1,7 +1,13 @@
 import React from 'react';
 
+import { ChatLayout } from '@/components/ai/chat/chat-layout';
+
 const AI = () => {
-  return <div>AI</div>;
+  return (
+    <div className="h-full pb-2">
+      <ChatLayout />
+    </div>
+  );
 };
 
 export default AI;

src/app/edit/layout.tsx

@@ -155,6 +155,7 @@ const Page: React.FC<{ children: React.ReactNode }> = ({ children }) => {
           <PanelGroup direction="horizontal" className="flex-1">
             <Panel minSize={1} defaultSize={15} className="bg-[#202327]">
               <motion.div
+                className="h-full"
                 key={pathname}
                 className=" overflow-y-scroll h-full hide-scrollbar"
                 initial={{ y: 20, opacity: 0, scale: 0.95 }}

src/components/ai/chat/chat-bottombar.tsx

@@ -0,0 +1,85 @@
+import { FileImage, Paperclip, Send } from 'lucide-react';
+import React, { useRef, useState } from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+
+import { Message, loggedInUserData } from './data';
+import { Textarea } from './textarea';
+
+interface ChatBottombarProps {
+  sendMessage: (newMessage: Message) => void;
+}
+
+export const BottombarIcons = [{ icon: FileImage }, { icon: Paperclip }];
+
+export default function ChatBottombar({ sendMessage }: ChatBottombarProps) {
+  const [message, setMessage] = useState('');
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+
+  const handleInputChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setMessage(event.target.value);
+  };
+
+  const handleSend = () => {
+    if (message.trim()) {
+      const newMessage: Message = {
+        id: Date.now(),
+        name: loggedInUserData.name,
+        avatar: loggedInUserData.avatar,
+        sessionId: loggedInUserData.sessionId,
+        message: message.trim(),
+      };
+      sendMessage(newMessage);
+      setMessage('');
+
+      if (inputRef.current) {
+        inputRef.current.focus();
+      }
+    }
+  };
+
+  const handleKeyPress = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (event.key === 'Enter' && !event.shiftKey) {
+      event.preventDefault();
+      handleSend();
+    }
+
+    if (event.key === 'Enter' && event.shiftKey) {
+      event.preventDefault();
+      setMessage((prev) => prev + '\n');
+    }
+  };
+
+  return (
+    <div className="p-2 flex justify-between w-full items-center gap-2">
+      <AnimatePresence initial={false}>
+        <motion.div
+          key="input"
+          className="flex items-center justify-around gap-2 w-full relative"
+          layout
+          initial={{ opacity: 0, scale: 1 }}
+          animate={{ opacity: 1, scale: 1 }}
+          exit={{ opacity: 0, scale: 1 }}
+          transition={{
+            opacity: { duration: 0.05 },
+            layout: {
+              type: 'spring',
+              bounce: 0.15,
+            },
+          }}
+        >
+          <Textarea
+            autoComplete="off"
+            value={message}
+            ref={inputRef}
+            onKeyDown={handleKeyPress}
+            onChange={handleInputChange}
+            name="message"
+            placeholder="Aa"
+            className="w-full border rounded-full flex items-center h-9 resize-none overflow-hidden bg-background"
+          ></Textarea>
+          <Send onClick={handleSend} />
+        </motion.div>
+      </AnimatePresence>
+    </div>
+  );
+}

src/components/ai/chat/chat-layout.tsx

@@ -0,0 +1,12 @@
+'use client';
+
+import React from 'react';
+
+import { userData } from './data';
+import { Chat } from './chat';
+
+export function ChatLayout() {
+  const [selectedUser] = React.useState(userData[0]);
+
+  return <Chat messages={selectedUser.messages} selectedUser={selectedUser} />;
+}

src/components/ai/chat/chat-list.tsx

@@ -0,0 +1,76 @@
+import React, { useRef } from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+
+import { Message, UserData } from './data';
+import { cn } from './utils';
+import ChatBottombar from './chat-bottombar';
+
+import { Avatar, AvatarImage } from '@/components/ui/avatar/index';
+
+interface ChatListProps {
+  messages?: Message[];
+  selectedUser: UserData;
+  sendMessage: (newMessage: Message) => void;
+}
+
+export function ChatList({ messages, selectedUser, sendMessage }: ChatListProps) {
+  const messagesContainerRef = useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => {
+    if (messagesContainerRef.current) {
+      messagesContainerRef.current.scrollTop = messagesContainerRef.current.scrollHeight;
+    }
+  }, [messages]);
+
+  return (
+    <div className="w-full overflow-y-auto overflow-x-hidden h-full flex flex-col">
+      <div
+        ref={messagesContainerRef}
+        className="w-full overflow-y-auto overflow-x-hidden h-full flex flex-col bg-slate-900 rounded-lg "
+      >
+        <AnimatePresence>
+          {messages?.map((message, index) => (
+            <motion.div
+              key={index}
+              layout
+              initial={{ opacity: 0, scale: 1, y: 50, x: 0 }}
+              animate={{ opacity: 1, scale: 1, y: 0, x: 0 }}
+              exit={{ opacity: 0, scale: 1, y: 1, x: 0 }}
+              transition={{
+                opacity: { duration: 0.1 },
+                layout: {
+                  type: 'spring',
+                  bounce: 0.3,
+                  duration: messages.indexOf(message) * 0.05 + 0.2,
+                },
+              }}
+              style={{
+                originX: 0.5,
+                originY: 0.5,
+              }}
+              className={cn(
+                'flex flex-col gap-2 p-4 whitespace-pre-wrap',
+                message.name === selectedUser.name ? 'items-end' : 'items-start',
+              )}
+            >
+              <div className="flex gap-3 items-center">
+                {message.name !== selectedUser.name && (
+                  <Avatar className="flex justify-center items-center">
+                    <AvatarImage src={message.avatar} alt={message.name} width={6} height={6} />
+                  </Avatar>
+                )}
+                <span className=" bg-slate-600 p-3 rounded-md max-w-xs">{message.message}</span>
+                {message.name === selectedUser.name && (
+                  <Avatar className="flex justify-center items-center">
+                    <AvatarImage src={message.avatar} alt={message.name} width={6} height={6} />
+                  </Avatar>
+                )}
+              </div>
+            </motion.div>
+          ))}
+        </AnimatePresence>
+      </div>
+      <ChatBottombar sendMessage={sendMessage} />
+    </div>
+  );
+}