mirror of
https://github.com/hpware/news-analyze.git
synced 2025-07-17 16:09:06 +00:00
Remove stuff including the chat function & TOS & Privacy Policy windows
& simplified the archive URL.
This commit is contained in:
parent
aa8fb3a2d2
commit
3a3c2c81e2
14 changed files with 20 additions and 573 deletions
|
|
@ -1,224 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import {
|
||||
History,
|
||||
Plus,
|
||||
Send,
|
||||
Square,
|
||||
User,
|
||||
BotMessageSquare,
|
||||
} from "lucide-vue-next";
|
||||
import { Input } from "~/components/ui/input";
|
||||
import blurPageBeforeLogin from "~/components/blurPageBeforeLogin.vue";
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
const { t } = useI18n();
|
||||
const cookie = useCookie("lastChatId");
|
||||
const cookieChatId = cookie.value;
|
||||
const chatId = ref();
|
||||
const inputMessage = ref();
|
||||
const messageIndex = ref();
|
||||
const aiGenerating = ref(false);
|
||||
const messages = ref<any[]>([]);
|
||||
const newsId = ref("");
|
||||
const isStreaming = ref(false);
|
||||
const streamingMessage = ref("");
|
||||
const messagesContainer = ref(null);
|
||||
|
||||
// Great, there are now no errors ig
|
||||
const emit = defineEmits(["windowopener", "error", "loadValue"]);
|
||||
const props = defineProps<{
|
||||
values?: string;
|
||||
}>();
|
||||
|
||||
const sendChatData = async (event?: KeyboardEvent) => {
|
||||
if (event?.shiftKey) return;
|
||||
if (inputMessage.value === "") return;
|
||||
const userMessage = inputMessage.value;
|
||||
inputMessage.value = "";
|
||||
aiGenerating.value = true;
|
||||
await sendMessage(userMessage);
|
||||
};
|
||||
|
||||
const stopChatGenerate = () => {
|
||||
aiGenerating.value = false;
|
||||
};
|
||||
|
||||
const chatUuid = ref("");
|
||||
|
||||
onMounted(() => {
|
||||
chatUuid.value = uuidv4();
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
/*const {
|
||||
data: getData,
|
||||
pending,
|
||||
error,
|
||||
} = useFetch(`/api/ai/chat/${chatId.value}`);*/
|
||||
});
|
||||
|
||||
const sendMessage = async (newMessage: any) => {
|
||||
if (!newMessage.trim() || !newsId.value.trim() || isStreaming.value) {
|
||||
return;
|
||||
}
|
||||
messages.value.push({
|
||||
index: messageIndex.value,
|
||||
id: uuidv4(),
|
||||
message: newMessage,
|
||||
user: true,
|
||||
timestamp: new Date(),
|
||||
});
|
||||
messageIndex.value += 1;
|
||||
|
||||
try {
|
||||
isStreaming.value = true;
|
||||
streamingMessage.value = "";
|
||||
|
||||
const response = await fetch(`/api/ai/chat/${chatUuid.value}`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
message: newMessage,
|
||||
newsid: newsId.value,
|
||||
}),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
const reader = response.body?.getReader();
|
||||
const decoder = new TextDecoder();
|
||||
|
||||
if (reader) {
|
||||
while (true) {
|
||||
const { done, value } = await reader.read();
|
||||
|
||||
if (done) break;
|
||||
|
||||
const chunk = decoder.decode(value, { stream: true });
|
||||
streamingMessage.value += chunk;
|
||||
await scrollToBottom();
|
||||
}
|
||||
}
|
||||
|
||||
// Add the complete assistant message
|
||||
if (streamingMessage.value) {
|
||||
messages.value.push({
|
||||
role: "assistant",
|
||||
content: streamingMessage.value,
|
||||
timestamp: new Date(),
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error sending message:", error);
|
||||
messages.value.push({
|
||||
role: "assistant",
|
||||
content: "Sorry, there was an error processing your message.",
|
||||
timestamp: new Date(),
|
||||
});
|
||||
} finally {
|
||||
isStreaming.value = false;
|
||||
streamingMessage.value = "";
|
||||
await scrollToBottom();
|
||||
}
|
||||
};
|
||||
|
||||
const formatMessage = (content: any) => {
|
||||
// Simple markdown-like formatting
|
||||
return content
|
||||
.replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>")
|
||||
.replace(/\*(.*?)\*/g, "<em>$1</em>")
|
||||
.replace(/\n/g, "<br>");
|
||||
};
|
||||
const formatTime = (timestamp: any) => {
|
||||
return new Intl.DateTimeFormat("zh-TW", {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
}).format(timestamp);
|
||||
};
|
||||
const scrollToBottom = () => {};
|
||||
</script>
|
||||
<template>
|
||||
<blurPageBeforeLogin>
|
||||
<div class="flex flex-col h-[100%] w-full">
|
||||
<div>
|
||||
<div
|
||||
class="justify-center align-center text-center flex flex-col sticky top-0 pt-2 min-h-0 border rounded-2xl gray-500/80 backdrop-blur-sm"
|
||||
>
|
||||
<div class="flex flex-row justify-between p-2">
|
||||
<h2 class="text-xl ml-4 text-bold">Chat Name</h2>
|
||||
<div class="flex flex-row justify-center align-center text-center">
|
||||
<div
|
||||
class="flex flex-row justify-center align-center text-center gap-2"
|
||||
>
|
||||
<button
|
||||
class="p-2 rounded-xl hover:bg-gray-300 transition-all duration-400"
|
||||
>
|
||||
<History class="h-4 w-4" />
|
||||
</button>
|
||||
<button
|
||||
class="p-2 rounded-xl hover:bg-gray-300 transition-all duration-400"
|
||||
>
|
||||
<Plus class="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
ref="chatContainerRef"
|
||||
class="flex-1 overflow-y-auto p-4 space-y-4"
|
||||
>
|
||||
<div
|
||||
v-for="message in messages"
|
||||
class="max-w-[80%] p-3 bg-gray-300/70 rounded-xl"
|
||||
>
|
||||
<div v-if="message.user" class="flex flex-row gap-2">
|
||||
<User class="w-5 h-5" />{{ message.message }}
|
||||
</div>
|
||||
<div v-else class="flex flex-row gap-2">
|
||||
<BotMessageSquare class="w-5 h-5" />{{ message.message }}
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="isStreaming" class="">
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-[75px]"></div>
|
||||
<div
|
||||
class="space-x-2 absolute bottom-2 inset-x-4 border-t p-2 min-h-0 border rounded-xl gray-500/80 backdrop-blur-sm"
|
||||
>
|
||||
<div class="text-black w-full flex flex-row">
|
||||
<Input
|
||||
class="flex-1 rounded-xl"
|
||||
placeholder="Type a message..."
|
||||
v-model="inputMessage"
|
||||
@keyup.enter="sendChatData($event)"
|
||||
:disabled="aiGenerating"
|
||||
/>
|
||||
<button
|
||||
class="pl-2 pr-2 mr-1 ml-1 bg-black text-white rounded-full hover:bg-gray-700 hover:translate-y-[-4px] transition-all duration-300 disabled:cursor-not-allowed disabled:hover:translate-y-0 disabled:bg-color-500"
|
||||
:disabled="!inputMessage?.trim()"
|
||||
@click="sendChatData()"
|
||||
v-if="!aiGenerating"
|
||||
>
|
||||
<Send class="w-5 h-5" />
|
||||
</button>
|
||||
<button
|
||||
class="pl-2 pr-2 mr-1 ml-1 bg-black text-white rounded-full hover:bg-gray-700 hover:translate-y-[-4px] transition-all duration-300 disabled:cursor-not-allowed disabled:hover:translate-y-0 disabled:bg-color-500"
|
||||
@click="stopChatGenerate"
|
||||
v-else
|
||||
>
|
||||
<Square class="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
<span class="text-xs text-center justify-center align-center w-full"
|
||||
>Note: AI might create imbalanced views.</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</blurPageBeforeLogin>
|
||||
</template>
|
||||
|
|
@ -53,7 +53,7 @@ const contentArray = ref([]);
|
|||
const errorr = ref(false);
|
||||
const switchTabs = ref(false);
|
||||
const tabs = ref([]);
|
||||
const primary = ref<string>("domestic"); // Hard code default value as top is just pure garbage.
|
||||
const primary = ref<string>("top"); // This will be later overwritten, so values set here will be useless.
|
||||
const canNotLoadTabUI = ref(false);
|
||||
const isDataCached = ref(false);
|
||||
const pullTabsData = async () => {
|
||||
|
|
|
|||
|
|
@ -117,7 +117,7 @@ const starArticle = async () => {
|
|||
};
|
||||
|
||||
onMounted(async () => {
|
||||
const req = await fetch(`/user/${slug}/star`);
|
||||
const req = await fetch(`/api/user/${slug}/star`);
|
||||
const res = await req.json();
|
||||
staredStatus.value = res;
|
||||
});
|
||||
|
|
@ -137,7 +137,7 @@ onMounted(async () => {
|
|||
</div>
|
||||
<div
|
||||
v-if="loadingTranslations"
|
||||
class="flex flex-col bg-gray-200/50 text-black w-full h-full absolute inset-0 justify-center align-middle text-center z-[20] backdrop-blur-sm"
|
||||
class="flex flex-col bg-gray-200/50 text-black w-full h-full fixed inset-0 justify-center align-middle text-center z-[20] backdrop-blur-sm"
|
||||
>
|
||||
<!--Spinner from https://flowbite.com/docs/components/spinner/-->
|
||||
<div role="status">
|
||||
|
|
@ -164,10 +164,7 @@ onMounted(async () => {
|
|||
class="justify-center align-center text-center flex flex-col md:flex-row flex-wrap"
|
||||
>
|
||||
<div class="flex flex-col">
|
||||
<div class="p-4 w-full h-fit pt-0 mt-0">
|
||||
<img v-if="data.images[0]" :src="data.images[0]" class="rounded" />
|
||||
</div>
|
||||
<div class="group -translate-y-12 backdrop-blur-lg bg-gray-300/40">
|
||||
<div class="group translate-y-12">
|
||||
<h2 class="text-3xl text-bold">
|
||||
{{
|
||||
displayTranslatedText
|
||||
|
|
@ -189,6 +186,9 @@ onMounted(async () => {
|
|||
}}</span
|
||||
>
|
||||
</div>
|
||||
<div class="p-4 w-full h-fit pt-0 mt-0">
|
||||
<img v-if="data.images[0]" :src="data.images[0]" class="rounded" />
|
||||
</div>
|
||||
<div class="text-center" v-for="item in data.paragraph">
|
||||
{{ displayTranslatedText ? translateItem[item]?.translateText : item }}
|
||||
</div>
|
||||
|
|
@ -212,16 +212,6 @@ onMounted(async () => {
|
|||
<div v-else>{{ summaryText }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--<div class="flex flex-col bg-gray-500">
|
||||
<!--Similar articles-->
|
||||
<!--<div class="flex flex-row" v-for="item in likeart">
|
||||
<img /><!--Image-->
|
||||
<!--<div class="flex flex-col">
|
||||
<h2>title</h2>
|
||||
<span>description</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>-->
|
||||
<button
|
||||
@click="starArticle"
|
||||
:class="[
|
||||
|
|
|
|||
|
|
@ -1,9 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
const { t } = useI18n();
|
||||
</script>
|
||||
<template>
|
||||
<div class="justify-center align-center text-center">
|
||||
<h1 class="text-2xl text-bold">{{ t("pages.privacypolicy.title") }}</h1>
|
||||
<p>{{ t("pages.privacypolicy.content") }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -380,23 +380,6 @@ const submitUserPassword = async () => {
|
|||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<div
|
||||
class="flex flex-row gap-2 m-1 p-2 justify-center align-center text-center"
|
||||
>
|
||||
<button
|
||||
class="bg-sky-400 p-1 rounded hover:bg-sky-600 transition-all duration-200 w-32"
|
||||
@click="() => emit('windowopener', 'privacypolicy')"
|
||||
>
|
||||
Privacy Policy
|
||||
</button>
|
||||
<button
|
||||
class="bg-sky-400 p-1 rounded hover:bg-sky-600 transition-all duration-200 w-32"
|
||||
@click="() => emit('windowopener', 'tos')"
|
||||
>
|
||||
TOS
|
||||
</button>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="justiy-center align-center text-center">
|
||||
{{ t("app.settings") }} v0.0.3 || Version: {{ getVersionTag() }}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,9 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
const { t } = useI18n();
|
||||
</script>
|
||||
<template>
|
||||
<div class="justify-center align-center text-center">
|
||||
<h1 class="text-2xl text-bold">{{ t("pages.tos.title") }}</h1>
|
||||
<p>{{ t("pages.tos.content") }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,78 +0,0 @@
|
|||
<script setup lamng="ts">
|
||||
// Great, there are now no errors ig
|
||||
const emit = defineEmits(["windowopener", "error", "loadValue"]);
|
||||
import sha512 from "crypto-js/sha512";
|
||||
import Input from "~/components/ui/input/Input.vue";
|
||||
const userAccount = ref("");
|
||||
const userPassword = ref("");
|
||||
const error = ref(false);
|
||||
const errormsg = ref("");
|
||||
const success = ref(false);
|
||||
const submitUserPassword = async () => {
|
||||
error.value = false;
|
||||
errormsg.value = "";
|
||||
// Encrypt password during transit
|
||||
const password = sha512(userPassword.value).toString();
|
||||
|
||||
// Send data.
|
||||
const sendData = await fetch("/api/user/login", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
username: userAccount.value,
|
||||
password: password,
|
||||
}),
|
||||
});
|
||||
const res = await sendData.json();
|
||||
|
||||
if (!res.error) {
|
||||
error.value = false;
|
||||
success.value = true;
|
||||
console.log(res);
|
||||
userAccount.value = "";
|
||||
} else {
|
||||
error.value = true;
|
||||
errormsg.value = res.error;
|
||||
}
|
||||
userPassword.value = "";
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<div class="">
|
||||
<form
|
||||
class="flex flex-col items-center justify-center h-full"
|
||||
@submit.prevent="submitUserPassword"
|
||||
v-if="!success"
|
||||
>
|
||||
<span class="text-2xl text-bold mb-0">Login / Register</span>
|
||||
<span class="mb-4 text-sm mt-0"
|
||||
>We will create a account for you if you don't have one.</span
|
||||
>
|
||||
<div class="">
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Username"
|
||||
class="mb-2 p-2 border rounded"
|
||||
v-model="userAccount"
|
||||
required
|
||||
/>
|
||||
<Input
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
class="p-2 border rounded mb-2"
|
||||
v-model="userPassword"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<span v-if="error" class="text-red-600 text-xs m-2"
|
||||
>Error: {{ errormsg }}</span
|
||||
>
|
||||
<button class="bg-black text-white p-2 rounded transition duration-200">
|
||||
Log In
|
||||
</button>
|
||||
</form>
|
||||
<div v-else>Hi! ${user}</div>
|
||||
</div>
|
||||
</template>
|
||||
Loading…
Add table
Add a link
Reference in a new issue