implement chat history

Author: fishonamos

apps/client/app/components/ui/Header.tsx

@@ -2,16 +2,20 @@
 import React from 'react';
 import { ConnectButton, useWallet } from '@suiet/wallet-kit';
 import Image from 'next/image';
+
 const Header = () => {
-  const wallet = useWallet();
-  console.log(wallet.address, wallet.connected);
+  const { address, connected } = useWallet();
+
   return (
     <div className="w-[75dvw] grid grid-cols-1 md:flex justify-between">
-      {/* <p style={{
-        fontFamily:"Manrope",
-      }} className="text-lg text-right md:text-left">Atoma's Coin Sage</p> */}
       <span className="flex items-center">
-        <Image src="/coinSageLogo.png" width={50} height={50} alt="atomasage logo" />
+        <Image 
+          src="/coinSageLogo.png" 
+          width={50} 
+          height={50} 
+          alt="atomasage logo"
+          priority
+        />
         <p
           style={{
             fontFamily: 'fantasy'
@@ -22,8 +26,15 @@ const Header = () => {
         </p>
       </span>
 
-      <div className="w-10 md:block z-20 hidden ">
-        <ConnectButton className="" label="Connect Wallet" />
+      <div className="flex items-center gap-4">
+        {connected && (
+          <span className="text-sm text-gray-600">
+            {address?.slice(0, 6)}...{address?.slice(-4)}
+          </span>
+        )}
+        <div className="w-40 md:block z-20">
+          <ConnectButton label="Connect Wallet" />
+        </div>
       </div>
     </div>
   );

apps/client/app/components/ui/WalletStatus.tsx

@@ -0,0 +1,18 @@
+'use client';
+import { useWallet } from '@suiet/wallet-kit';
+
+const WalletStatus = () => {
+  const { connected } = useWallet();
+
+  if (!connected) {
+    return (
+      <div className="text-center p-4 my-4 bg-yellow-50 border border-yellow-200 rounded-lg text-yellow-700">
+        Please connect your wallet to start chatting and save your conversation history
+      </div>
+    );
+  }
+
+  return null;
+};
+
+export default WalletStatus; 

apps/client/app/globals.css

@@ -44,3 +44,11 @@ button {
 .logo.react:hover {
   filter: drop-shadow(0 0 2em #61dafbaa);
 } */
+
+.sui-wallet-kit-button {
+  @apply px-4 py-2 rounded-lg bg-blue-600 text-white hover:bg-blue-700 transition-colors !important;
+}
+
+.sui-wallet-kit-button span {
+  @apply text-sm font-medium !important;
+}

apps/client/app/page.tsx

@@ -1,5 +1,5 @@
 'use client';
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import api from './lib/api';
 import { useWallet } from '@suiet/wallet-kit';
 import JSONFormatter from './utils/JSONFormatter';
@@ -15,32 +15,42 @@ export default function Home() {
   >([]);
   const [inputValue, setInputValue] = useState('');
   const [isThinking, setIsThinking] = useState(false);
-  const { address } = useWallet();
+  const { address, connected } = useWallet();
+
+  // Load chat history when wallet connects
+  useEffect(() => {
+    if (address && connected) {
+      loadChatHistory();
+      // Send initial wallet connection message
+      handleSend(`Connected wallet: ${address}`);
+    }
+  }, [address, connected]);
+
+  const loadChatHistory = async () => {
+    try {
+      const response = await api.get(`/query/history/${address}`);
+      setMessages(response.data);
+    } catch (error) {
+      console.error('Error loading chat history:', error);
+    }
+  };
 
   const handleSend = async (message?: string) => {
     const userMessage = message || inputValue.trim();
 
     if (userMessage) {
       setMessages((prev) => [...prev, { text: userMessage, sender: 'user' }]);
-      setIsThinking(true);
       setInputValue('');
+      setIsThinking(true);
 
       try {
-        let modifiedMessage = userMessage;
-
-        const containsKeywords = keywords.some((keyword) =>
-          userMessage.toLowerCase().includes(keyword)
-        );
-
-        if (containsKeywords) {
-          modifiedMessage = `${userMessage}. My wallet address is ${address}.`;
-        }
+        // Always send the wallet address with the query
+        const response = await api.post('/query', { 
+          query: userMessage,
+          walletAddress: address 
+        });
 
-        console.log(modifiedMessage, 'modified');
-        const response = await api.post('/query', { query: modifiedMessage });
-        console.log(response);
         const res = response.data[0];
-        console.log(res);
         let llmResponse = '';
 
         if (typeof res.response === 'string') {

apps/web/package.json

@@ -15,7 +15,8 @@
     "@atoma-agents/sui-agent": "workspace:*",
     "cors": "^2.8.5",
     "dotenv": "^16.4.7",
-    "express": "^4.21.2"
+    "express": "^4.21.2",
+    "mongoose": "^8.10.0"
   },
   "devDependencies": {
     "@types/cors": "^2.8.17",

apps/web/src/app.ts

@@ -1,6 +1,8 @@
 import express, { Application } from 'express';
 import cors from 'cors';
 import v1routes from './routes/v1';
+import { connectDB } from './utils/db';
+import queryRouter from './routes/v1/query';
 
 /**
  * Express application instance.
@@ -27,6 +29,9 @@ app.use(cors()); // Enable CORS for all routes
  */
 app.use(v1routes);
 
+// Connect to MongoDB
+connectDB().catch(console.error);
+
 /**
  * @exports app
  * @type {Application}

apps/web/src/models/ChatHistory.ts

@@ -0,0 +1,38 @@
+import mongoose, { Schema, Document } from 'mongoose';
+
+export interface IMessage {
+  text: string;
+  sender: 'user' | 'llm';
+  isHTML?: boolean;
+  timestamp: Date;
+}
+
+export interface IChatHistory extends Document {
+  walletAddress: string;
+  messages: IMessage[];
+  createdAt: Date;
+  updatedAt: Date;
+}
+
+const ChatHistorySchema = new Schema(
+  {
+    walletAddress: {
+      type: String,
+      required: true,
+      index: true
+    },
+    messages: [
+      {
+        text: { type: String, required: true },
+        sender: { type: String, enum: ['user', 'llm'], required: true },
+        isHTML: { type: Boolean, default: false },
+        timestamp: { type: Date, default: Date.now }
+      }
+    ]
+  },
+  {
+    timestamps: true
+  }
+);
+
+export default mongoose.model<IChatHistory>('ChatHistory', ChatHistorySchema);

apps/web/src/routes/v1/query.ts

@@ -2,6 +2,8 @@ import { Router } from 'express';
 import { Request, Response } from 'express';
 import { config } from '../../config';
 import Agent from '@atoma-agents/sui-agent/src/agents/SuiAgent';
+import ChatHistory from '../../models/ChatHistory';
+
 const suiAgent = new Agent(config.atomaSdkBearerAuth);
 const queryRouter: Router = Router();
 
@@ -13,15 +15,53 @@ queryRouter.get('/health', (req: Request, res: Response) => {
 // Query endpoint
 const handleQuery = async (req: Request, res: Response): Promise<void> => {
   try {
-    const { query } = req.body;
+    const { query, walletAddress } = req.body;
+
     if (!query) {
       res.status(400).json({
         error: 'Missing query in request body'
       });
       return;
     }
 
+    // Get agent response first
     const result = await suiAgent.SuperVisorAgent(query);
+
+    // Only try to save chat history if walletAddress is provided
+    if (walletAddress) {
+      try {
+        // Get or create chat history for this wallet
+        let chatHistory = await ChatHistory.findOne({ walletAddress });
+        if (!chatHistory) {
+          chatHistory = new ChatHistory({ walletAddress, messages: [] });
+        }
+
+        // Add user message to history
+        chatHistory.messages.push({
+          text: query,
+          sender: 'user',
+          timestamp: new Date()
+        });
+
+        // Add agent response to history
+        chatHistory.messages.push({
+          text:
+            typeof result[0].response === 'string'
+              ? result[0].response
+              : JSON.stringify(result[0].response),
+          sender: 'llm',
+          isHTML: true,
+          timestamp: new Date()
+        });
+
+        // Save chat history
+        await chatHistory.save();
+      } catch (chatError) {
+        console.warn('Error saving chat history:', chatError);
+        // Continue with the response even if chat history fails
+      }
+    }
+
     res.status(200).json(result);
   } catch (error) {
     console.error('Error handling query:', error);
@@ -31,6 +71,20 @@ const handleQuery = async (req: Request, res: Response): Promise<void> => {
   }
 };
 
+// Get chat history endpoint
+queryRouter.get('/history/:walletAddress', async (req: Request, res: Response) => {
+  try {
+    const { walletAddress } = req.params;
+    const chatHistory = await ChatHistory.findOne({ walletAddress });
+    res.status(200).json(chatHistory?.messages || []);
+  } catch (error) {
+    console.error('Error fetching chat history:', error);
+    res.status(500).json({
+      error: 'Internal server error'
+    });
+  }
+});
+
 // Handle unsupported methods
 const handleUnsupportedMethod = (req: Request, res: Response): void => {
   res.status(405).json({

apps/web/src/server.ts

@@ -1,49 +1,31 @@
-import http from 'http';
 import app from './app';
-import { config } from './config';
+import { connectDB, disconnectDB } from './utils/db';
 
-/**
- * Main application class that initializes and starts the server
- */
-class Main {
-  private port: string | number;
+const port = process.env.PORT || 2512;
 
-  /**
-   * Initialize the application with port
-   * @param port - Port number for the server to listen on
-   */
-  constructor(port: string | number) {
-    this.port = port;
-  }
+async function startServer() {
+  try {
+    await connectDB();
 
-  /**
-   * Start the HTTP server
-   */
-  async start() {
-    const server = http.createServer(app);
+    const server = app.listen(port, () => {
+      console.log(`Server is running on port ${port}`);
+    });
 
-    // Graceful shutdown handler
-    const shutdown = () => {
-      console.log('Shutting down gracefully...');
-      server.close(() => {
-        console.log('Server closed');
+    // Handle graceful shutdown
+    const shutdown = async () => {
+      console.log('Shutting down server...');
+      server.close(async () => {
+        await disconnectDB();
         process.exit(0);
       });
     };
 
-    // Handle shutdown signals
     process.on('SIGTERM', shutdown);
     process.on('SIGINT', shutdown);
-
-    server.listen(this.port, () => {
-      console.log(`Server is listening on port ${this.port}`);
-    });
+  } catch (error) {
+    console.error('Failed to start server:', error);
+    process.exit(1);
   }
 }
 
-// Create and start the application
-const main = new Main(config.port);
-main.start().catch((error) => {
-  console.error('Failed to start server:', error);
-  process.exit(1);
-});
+startServer();

apps/web/src/types/global.d.ts

@@ -0,0 +1,20 @@
+import mongoose from 'mongoose';
+
+declare global {
+  var _mongooseCache: {
+    conn: typeof mongoose | null;
+    promise: Promise<typeof mongoose> | null;
+  } | undefined;
+}
+
+// Augment the NodeJS namespace to include our custom property
+declare module 'node:process' {
+  global: typeof globalThis & {
+    _mongooseCache?: {
+      conn: typeof mongoose | null;
+      promise: Promise<typeof mongoose> | null;
+    };
+  };
+}
+
+export {};