fixed network config and wrong paths in frontend

src/api/client.ts

@@ -1,3 +1,4 @@
+import { fetch } from '@tauri-apps/plugin-http';
 import { initAuth, logout } from '../store.ts'
 import { API } from '../main.ts'
 import router from '../router'
@@ -9,6 +10,8 @@ export async function apiFetch<T>(
   const auth = await initAuth()
 
   const res = await fetch(`${API}${path}`, {
+    method: options.method || 'GET',
+    body: options.body,
     ...options,
     headers: {
       'Content-Type': 'application/json',
@@ -28,5 +31,5 @@ export async function apiFetch<T>(
     throw new Error(text || res.statusText)
   }
 
-  return res.json()
+  return res.json() as Promise<T>
 }

src/api/friends.ts

@@ -1,5 +1,5 @@
 import { apiFetch } from './client'
-import type { Friend, FriendRequest } from '../api'
+import type { Friend, FriendRequest } from '../types'
 
 export function fetchFriends() {
   return apiFetch<Friend[]>('/friends')

src/api/messages.ts

@@ -1,5 +1,5 @@
 import { apiFetch } from './client'
-import type { Message } from '../api'
+import type { Message } from '../types'
 
 export function fetchMessages(roomUuid: string) {
   return apiFetch<Message[]>(`/messages/${roomUuid}`)

src/api/rooms.ts

@@ -1,5 +1,5 @@
 import { apiFetch } from './client'
-import type { Room } from '../api'
+import type { Room } from '../types'
 
 export function fetchRooms(userUuid: string) {
   return apiFetch<Room[]>(`/rooms/${userUuid}`)

src/components/ChatWindow.vue

@@ -12,7 +12,6 @@
     </div>
 
     <div class="input-container">
-      <!-- Added ref="messageInputRef" -->
       <MessageInput ref="messageInputRef" @send="onSend" />
     </div>
   </div>
@@ -22,26 +21,24 @@
 import { ref, onMounted, onUnmounted, watch, nextTick } from "vue";
 import { fetchMessages, sendMessage, getWsToken } from "../api/messages";
 import type { Message } from "../types";
-import { API_WS } from '../main.ts'
+import { API_WS } from '../main.ts';
 import MessageList from "./MessageList.vue";
 import MessageInput from "./MessageInput.vue";
 
+import WebSocket from '@tauri-apps/plugin-websocket';
+
 const props = defineProps<{ uuid: string }>();
 const messages = ref<Message[]>([]);
 const messageListRef = ref<HTMLElement | null>(null);
-const messageInputRef = ref<InstanceType<typeof MessageInput> | null>(null); // Ref for focusing
+const messageInputRef = ref<InstanceType<typeof MessageInput> | null>(null);
+
 let socket: WebSocket | null = null;
 
-// Handle global Enter key to focus input
 const handleGlobalKeyDown = (event: KeyboardEvent) => {
   if (event.key === 'Enter') {
     const active = document.activeElement?.tagName.toLowerCase();
-
-    // Don't hijack focus if user is already typing in an input or textarea
     const isTyping = active === 'input' || active === 'textarea';
-
     if (!isTyping && messageInputRef.value) {
-      // Prevent default to avoid side effects like clicking a focused button
       event.preventDefault();
       messageInputRef.value.focus();
     }
@@ -50,27 +47,39 @@ const handleGlobalKeyDown = (event: KeyboardEvent) => {
 
 async function initializeRoom() {
   if (socket) {
-    socket.close();
+    await socket.disconnect();
     socket = null;
   }
+
   messages.value = [];
 
   if (props.uuid === 'none') return;
 
-  messages.value = await fetchMessages(props.uuid);
-  await nextTick();
-  scrollToBottom();
+  try {
+    messages.value = await fetchMessages(props.uuid);
+    await nextTick();
+    scrollToBottom();
 
-  const wsToken = await getWsToken(props.uuid);
-  socket = new WebSocket(`${API_WS}/rooms/${props.uuid}?token=${wsToken}`);
+    const wsToken = await getWsToken(props.uuid);
 
-  socket.onmessage = (event) => {
-    const msg: Message = JSON.parse(event.data);
-    if (!messages.value.some(m => m.uuid === msg.uuid)) {
-      messages.value.push(msg);
-      nextTick().then(scrollToBottom);
-    }
-  };
+    const url = `${API_WS}/rooms/${props.uuid}?token=${wsToken}`;
+    socket = await WebSocket.connect(url);
+
+    socket.addListener((msg) => {
+      if (msg.type === 'Text') {
+        const data: Message = JSON.parse(msg.data);
+
+        if (!messages.value.some(m => m.uuid === data.uuid)) {
+          messages.value.push(data);
+          nextTick().then(scrollToBottom);
+        }
+      }
+    });
+
+    console.log("WebSocket Connected successfully via Rust layer");
+  } catch (err) {
+    console.error("WebSocket connection failed:", err);
+  }
 }
 
 async function onSend(content: string) {
@@ -93,8 +102,10 @@ onMounted(() => {
   window.addEventListener('keydown', handleGlobalKeyDown);
 });
 
-onUnmounted(() => {
-  socket?.close();
+onUnmounted(async () => {
+  if (socket) {
+    await socket.disconnect();
+  }
   window.removeEventListener('keydown', handleGlobalKeyDown);
 });
 </script>

src/components/MessageList.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { Message } from '../api'
+import type { Message } from '../types'
 defineProps<{ messages: Message[] }>()
 </script>
 

src/main.ts

@@ -15,5 +15,5 @@ async function init() {
 
 init()
 
-export const API = 'http://192.168.1.183:8081'
-export const API_WS = 'ws://192.168.1.183:8081/ws'
+export const API = 'http://192.168.1.147:8081'
+export const API_WS = 'ws://192.168.1.147:8081/ws'

src/pages/FriendListPage.vue

@@ -43,7 +43,7 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
 import { fetchFriends, fetchFriendRequests, acceptFriendRequest, sendFriendRequest } from '../api/friends'
-import type { Friend, FriendRequest } from '../api'
+import type { Friend, FriendRequest } from '../types'
 
 const friends = ref<Friend[]>([])
 const requests = ref<FriendRequest[]>([])