乱了, 懒得说是什么

client/env.d.ts

@@ -1,6 +1,19 @@
 /// <reference types="mdui/jsx.zh-cn.d.ts" />
 /// <reference types="vite/client" />
 
+// 貌似没有起效
+declare global {
+    namespace React {
+        namespace JSX {
+            interface IntrinsicElements {
+                'input-element': {
+                    'value'?: string
+                } & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>
+            }
+        }
+    }
+}
+
 declare const __APP_VERSION__: string
 declare const __GIT_HASH__: string
 declare const __GIT_HASH_FULL__: string

client/init.ts

@@ -14,6 +14,8 @@ import './ui/chat-elements/chat-text.ts'
 import './ui/chat-elements/chat-mention.ts'
 import './ui/chat-elements/chat-text-container.ts'
 import './ui/chat-elements/chat-quote.ts'
+import './ui/InputElement.ts'
+import './ui/InnerTextContainerElement.ts'
 import Main from "./ui/Main.tsx"
 
 import performAuth from './performAuth.ts'

client/ui/InnerTextContainerElement.ts

@@ -0,0 +1,24 @@
+export default class InnerTextContainerElement extends HTMLElement {
+    static observedAttributes = ['text']
+    declare textContainer: HTMLDivElement
+    declare slotContainer: HTMLSlotElement
+    declare text?: string
+    constructor() {
+        super()
+        this.attachShadow({ mode: 'open' })
+    }
+    connectedCallback() {
+        this.shadowRoot!.appendChild(document.createElement('slot'))
+    }
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {
+        if (this.textContainer == null) {
+            this.textContainer = document.createElement('div')
+            // 注意这里不能加到 shadow
+            this.appendChild(this.textContainer)
+            this.textContainer.style.display = 'none'
+        }
+        this.textContainer.innerText = newValue || ''
+    }
+}
+
+customElements.define('inner-text-container', InnerTextContainerElement)

client/ui/InputElement.ts

@@ -0,0 +1,58 @@
+import { $ } from "mdui"
+
+export default class InputElement extends HTMLElement {
+    static observedAttributes = ['user-id']
+    declare inputDiv: HTMLDivElement
+    constructor() {
+        super()
+
+        this.attachShadow({ mode: 'open' })
+    }
+
+    _lastValue = ''
+    connectedCallback() {
+        const shadow = this.shadowRoot as ShadowRoot
+
+        this.inputDiv = new DOMParser().parseFromString(`
+            <div contentEditable="true" style="outline: none !important; color: rgb(var(--mdui-color-on-surface-variant)); display: inline-block; word-wrap: break-word; white-space: pre-wrap;"></div>
+        `, 'text/html').body.firstChild as HTMLDivElement
+        this.inputDiv.contentEditable = 'true'
+
+        this.inputDiv.addEventListener('blur', () => {
+            if (this._lastValue !== this.value) {
+                this._lastValue = this.value || ''
+                this.dispatchEvent(new Event('change', { bubbles: true }))
+            }
+        })
+        this.inputDiv.addEventListener('paste', (e: ClipboardEvent) => {
+            e.preventDefault()
+            document.execCommand('insertText', false, e.clipboardData?.getData("text/plain") || '')
+        })
+
+        this.inputDiv.style.width = '100%'
+
+        shadow.appendChild(this.inputDiv)
+    }
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {
+        switch (name) {
+            case 'value': {
+                this.value = newValue || ''
+                break
+            }
+        }
+    }
+    focus() {
+        this.inputDiv.focus()
+    }
+    blur() {
+        this.inputDiv.blur()
+    }
+    get value() {
+        return this.inputDiv.textContent
+    }
+    set value(v) {
+        this.inputDiv.textContent = v
+    }
+}
+
+customElements.define('input-element', InputElement)

client/ui/app-state/AppStateContext.ts

@@ -7,7 +7,7 @@ type AppState = {
     openUserInfo: (user: Chat | User | string) => void,
     openEditMyProfile: () => void,
     openAddFavouriteChat: () => void,
-    openChat: (chat: string | Chat) => void,
+    openChat: (chat: string | Chat, inDialog?: boolean) => void,
     closeChat: () => void,
 }
 

client/ui/app-state/AppStateContextWrapper.tsx

@@ -12,6 +12,7 @@ import MainSharedContext, { Shared } from "../MainSharedContext"
 import ChatFragmentDialog from "./ChatFragmentDialog"
 import useAsyncEffect from "../../utils/useAsyncEffect"
 import ClientCache from "../../ClientCache"
+import isMobileUI from "../../utils/isMobileUI"
 
 const config = await fetch('/config.json').then((re) => re.json())
 
@@ -42,7 +43,6 @@ export default function DialogContextWrapper({ children, useRef }: { children: R
         MainSharedContext,
         (context: Shared) => context.state.currentSelectedChatId
     )
-    const [useChatFragmentDialog, setUseChatFragmentDialog] = React.useState(false)
     const chatFragmentDialogRef = React.useRef<Dialog>()
 
     useAsyncEffect(async () => {
@@ -70,10 +70,10 @@ export default function DialogContextWrapper({ children, useRef }: { children: R
         static async openChat(chat: string | Chat, inDialog?: boolean) {
             if (chat instanceof Chat) chat = chat.getId()
 
-            setUseChatFragmentDialog(inDialog || false)
             setUserOrChatInfoDialogState([])
             setCurrentSelectedChatId(chat)
-            chatFragmentDialogRef.current!.open = true
+
+            inDialog && (chatFragmentDialogRef.current!.open = true)
         }
         static closeChat() {
             if (chatFragmentDialogRef.current!.open) {
@@ -84,10 +84,10 @@ export default function DialogContextWrapper({ children, useRef }: { children: R
                 setCurrentSelectedChatId('')
         }
     }}>
+        {<ChatFragmentDialog chatId={currentSelectedChatId} useRef={chatFragmentDialogRef} />}
         <UserOrChatInfoDialog chat={userOrChatInfoDialogState[userOrChatInfoDialogState.length - 1] || lastUserOrChatInfoDialogStateRef.current} useRef={userOrChatInfoDialogRef} />
         <EditMyProfileDialog useRef={editMyProfileDialogRef} />
         <AddFavourtieChatDialog useRef={addFavouriteChatDialogRef} />
-        {useChatFragmentDialog && currentSelectedChatId && currentSelectedChatId != '' && <ChatFragmentDialog chatId={currentSelectedChatId} useRef={chatFragmentDialogRef} />}
         {children}
     </AppStateContext.Provider>
 }

client/ui/app-state/ChatFragmentDialog.tsx

@@ -1,9 +1,10 @@
 import { Dialog } from "mdui"
 import * as React from 'react'
 import LazyChatFragment from "../chat-fragment/LazyChatFragment"
+import useEventListener from "../../utils/useEventListener"
 
 export default function ChatFragmentDialog({ chatId, useRef }: { chatId: string, useRef: React.MutableRefObject<Dialog | undefined> }) {
-    React.useEffect(() => {
+    useEventListener(useRef, 'open', () => {
         const shadow = useRef.current!.shadowRoot as ShadowRoot
         const panel = shadow.querySelector(".panel") as HTMLElement
         panel.style.padding = '0'
@@ -13,14 +14,14 @@ export default function ChatFragmentDialog({ chatId, useRef }: { chatId: string,
         const body = shadow.querySelector(".body") as HTMLElement
         body.style.height = '100%'
         body.style.display = 'flex'
-    }, [chatId])
+    })
 
     return <mdui-dialog fullscreen ref={useRef}>
         <div style={{
             display: 'flex',
             width: '100%',
         }}>
-            <LazyChatFragment chatId={chatId} openedInDialog={true} />
+            {chatId != null && chatId != '' && <LazyChatFragment chatId={chatId} openedInDialog={true} />}
         </div>
     </mdui-dialog>
 }

client/ui/app-state/UserOrChatInfoDialog.tsx

@@ -110,7 +110,7 @@ export default function UserOrChatInfoDialog({ chat, useRef }: { chat?: Chat, us
                     })}>{favourited ? '取消收藏' : '收藏对话'}</mdui-list-item>
                 }
                 <mdui-list-item icon="chat" rounded onClick={async () => {
-                    AppState.openChat(chat!)
+                    AppState.openChat(chat!, isMobileUI())
                 }}>打开对话</mdui-list-item>
             </mdui-list>
         </mdui-dialog>

client/ui/chat-elements/chat-mention.ts

@@ -37,18 +37,14 @@ export default class ChatMentionElement extends HTMLElement {
         const text = $(this).attr('text')
         this.link.style.fontStyle = ''
         if (chatId) {
-            
             this.link.onclick = (e) => {
                 e.stopPropagation()
-                // deno-lint-ignore no-window
+                this.openChatInfo?.(chatId)
-                
             }
         } else if (userId) {
-           
             this.link.onclick = (e) => {
                 e.stopPropagation()
-                // deno-lint-ignore no-window
+                this.openUserInfo?.(userId)
-                
             }
         }
         

client/ui/chat-fragment/ChatFragment.tsx

@@ -160,7 +160,7 @@ export default function ChatFragment({
                 }} onDrop={(e) => {
                     // 文件拽入
                 }}>
-                    <mdui-text-field variant="outlined" placeholder="(｡･ω･｡)" autosize ref={inputRef} max-rows={6} onChange={() => {
+                    <mdui-text-field variant="outlined" placeholder="(｡･ω･｡)" autosize ref={inputRef} /* max-rows={6} */ onChange={() => {
                         if (inputRef.current?.value.trim() == '') {
                             // 清空缓存的文件
                         }
@@ -181,7 +181,12 @@ export default function ChatFragment({
                         marginRight: '10px',
                         marginTop: '3px',
                         marginBottom: '3px',
-                    }}></mdui-text-field>
+                    }}>
+                        {
+                            // @ts-ignore
+                            <input-element slot="input" />
+                        }
+                    </mdui-text-field>
                     <mdui-button-icon slot="end-icon" icon="attach_file" style={{
                         marginRight: '6px',
                     }} onClick={() => {

client/ui/main-page/RecentChatsList.tsx

@@ -77,7 +77,7 @@ export default function RecentChatsList({ ...props }: React.HTMLAttributes<HTMLE
             ).map((v) =>
                 <RecentsListItem
                     active={isMobileUI() ? false : shared.state.currentSelectedChatId == v.getId()}
-                    onClick={() => AppState.openChat(v.getId())}
+                    onClick={() => AppState.openChat(v.getId(), isMobileUI())}
                     key={v.getId()}
                     recentChat={v} />
             )

client/utils/isMobileUI.ts

@@ -1,5 +1,7 @@
 import data from "../data"
 
+const searchParams = new URL(location.href).searchParams
+
 export default function isMobileUI() {
-    return data.override_use_mobile_ui || /Mobi|Android|iPhone/i.test(navigator.userAgent)
+    return data.override_use_mobile_ui || searchParams.get('mobile') == 'true' || /Mobi|Android|iPhone/i.test(navigator.userAgent)
 }

mdui_patched/components/text-field/index.js

@@ -398,9 +398,9 @@ let TextField = class TextField extends FocusableMixin(MduiElement) {
             'is-firefox': navigator.userAgent.includes('Firefox'),
             ...invalidClassNameObj,
         });
-        return html `<div part="container" class="${className}">${this.renderPrefix()}<div class="input-container">${this.renderLabel()} ${this.isTextarea
+        return html `<div part="container" class="${className}">${this.renderPrefix()}<div class="input-container">${this.renderLabel()} ${!hasInputSlot ? (this.isTextarea
             ? this.renderTextArea(hasInputSlot)
-            : this.renderInput(hasInputSlot)} ${when(hasInputSlot, () => html `<slot name="input" class="input"></slot>`)}</div>${this.renderSuffix()}${this.renderClearButton(hasClearButton)} ${this.renderTogglePasswordButton(hasTogglePasswordButton)} ${this.renderRightIcon(hasErrorIcon)}</div>${when(hasError || hasHelper || hasCounter, () => html `<div part="supporting" class="${classMap({ supporting: true, ...invalidClassNameObj })}">${this.renderHelper(hasError, hasHelper)} ${this.renderCounter(hasCounter)}</div>`)}`;
+            : this.renderInput(hasInputSlot)) : ''} ${when(hasInputSlot, () => html `<slot name="input" class="input"></slot>`)}</div>${this.renderSuffix()}${this.renderClearButton(hasClearButton)} ${this.renderTogglePasswordButton(hasTogglePasswordButton)} ${this.renderRightIcon(hasErrorIcon)}</div>${when(hasError || hasHelper || hasCounter, () => html `<div part="supporting" class="${classMap({ supporting: true, ...invalidClassNameObj })}">${this.renderHelper(hasError, hasHelper)} ${this.renderCounter(hasCounter)}</div>`)}`;
     }
     setCustomValidityInternal(message) {
         this.inputRef.value.setCustomValidity(message);